[javascript] fetch API사용

fetch

• fetch 함수는 XMLHttpReques객체보다 더 최근에 나오게 된 HTTP 요청 전송 기능을 제공하는 Web API이다.

• fetch함수를 사용하면 리소스를 비동기로 요청할 수 있다.

• fetch를 호출하면 브라우저는 요청을 보내고 Promise 객체를 반환한다. 요청이 완료되면 성공 여부에 상관없이 Promise가 resolved 되어 Response 객체가 반환된다.

• HTTP 요청이 완료되지 못한 상태라면 Promise가 rejected 된다. 이 경우 catch 메서드를 사용하여 에러를 처리할 수 있다.

• Response 객체는 응답에 대한 정보를 담고 있습니다. ok, status 속성을 이용하여 응답 성공 여부를 확인할 수 있습니다.

<구문>

• Fetch API를 사용하는 방법 중 하나는 fetch() API의 URL을 매개변수(parameter)로 전달하는 것이다.

• fetch(url)
• fetch() 메서드는 Promise를 반환한다.
• fetch()메서드 뒤에, Promise 메서드를 포함시킨다. then() :

fetch(url)
  .then(function() {
    // handle the response
  })

반환된 Promise가 resolve라면, then() 메서드 안쪽에 있는 function이 실행된다.

function은 API로부터 받은 데이터를 처리하기 위한 코드를 포함하고 있다.

fetch(url)
  .then(function() {
    // handle the response
  })
  .catch(function() {
    // handle the error
  });

fetch()를 사용해서 호출한 API가 중단되거나 다른 에러가 발생할 수 있다.

이럴 경우, reject promise가 반환된다.

catch 메서드는 거부된 promise를 처리하는데 쓰인다.

내가 선택한 API를 호출할 때 에러가 발생했을 경우, catch() 안의 코드가 실행된다.

fetch API

GET

아래 코드는 요청이 성공할 경우 then에서 response 객체를 받아 처리하고 최종적으로 그 결과를 출력합니다. 요청이 완료되지 못해 에러가 발생하면 catch에서 처리한다.

fetch('http://localhost:3000/todos')
  .then(res => {
    // response 처리
    console.log(res);
    // 응답을 JSON 형태로 파싱한다.
    return res.json();
  })
  .then(data => {
    // json 출력
    console.log(data)
  })
  .catch(err => {
    // error 처리
    console.log('Fetch Error', err);
  });

fetch API의 장단점

장점

• javascript의 내장 라이브러리로 별도의 import를 해줄 필요가 없다.
• 업데이트에 따른 에러 방지가 가능하다.

단점

• 지원하지 않는 브라우저가 있다.
• 네트워크 에러 발생시 response timeout이 없어 기다려야 한다.
  -JSON으로 변환해주는 과정이 필요하다.