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('해당 요청을 완료하였습니다.')
       }
   });

조건문들 통해 요청한 정보에대해 제대로 응답했다면 response.status가 200이므로 '해당 요청을 완료하였습니다.'라고 화면에 표시할 것이고 제대로 응답하지못하여 response.status가 404라면 '해당 요청에대해 응답하지 못했습니다.'를 화면에 출력할 것이다.

*응답받은 결과인 response에 .text() 혹은 .json() 등과같이 다른 메서드들을 사용하는데 각각 데이터의 자료가 텍스트형식이면 .text()로 받고 객체형식이면 .json()으로 받는다.