라벨이 fetch인 게시물 표시

Ajax fetch API

이미지
Ajax fetch API fetch 사용 예제 카카오 검색 api function fetchPage(name){ fetch(url).then(function(response){ response.text().then(function(text){ document.querySelector('article').innerHTML = text; }) }); }; fetch의 인자로 특정 백엔드 URL을 작성하면 불러올 파일을 요청하는것이고, 그다음에 작성된 then 메서드는 파일을 서버로 요청하여 다운되는동안 비동기적으로 다른일을 처리하다가 응답이 오면 해당 응답을 처리하는 메서드 이다. then 괄호 안에 들어가있는 콜백 함수의 매개변수로 들어가있는 response는 fetch를 통해 요청한 파일에대한 응답에 대한 결과를 인자로 받아와 response 매개변수의 인자로 준다. #fetch로 요청한 정보에대한 응답결과를 Response객체에 담아 인자로 반환한다. Ajax fetch API를 사용할 때 개발자 도구- Network를 확인해보면 status가 200인 경우와 404인 경우가 존재하는데  200은 잘 불러왔다는 의미이고 404의경우 요청한 파일을 불러오지 못했을때를 나타낸다.  이러한 정보또한 Response객체안에 내포되어있는데 이러한 정보들을 토대로 아래와같이 코드를 작성할 수도 있다. fetch('html').then(function(response){ console.log(response.status); if(response.status === 404){ document.write('해당 요청에대해 응답하지 못했습니다.') } else { document.write('해당 요청을 완료하였습니다.')...