3월 5일 여정 56일차이다.

오늘의 Today I Learned

Fetch라는 것은 ES6부터 도입된 Javascript 내장 라이브러리이다. Promise 기반 비동기 통신 라이브러리이다. axios처럼 데이터를 다루기 쉽고, 내장 라이브러리이기 때문에 별도의 설치 및 import를 필요로 하지 않는다.

최근에 도입이 되었지만, 그만큼 단점도 많다.

• 미지원 브라우저 존재
• 개발자에게 불친절한 response
• axios에 비해 부족한 기능

그렇다면 어떻게 사용할까?

const url = "https://jsonplaceholder.typicode.com/todos";

fetch(url)
.then((response) => response.json())
.then(console.log);

fetch를 사용하면 위와 같이 데이터를 불러올 수 있다.
fetch().then을 한 상태여도 여전히 JSON 포맷의 응답이 아니기 때문에 response.json()을 한번 더 해주는 과정이 필요하다. 따라서, fetch로 데이터를 요청하는 경우 두 개의 .then()이 필요하다.

const url = "https://jsonplaceholder.typicode.com/todos";

fetch(url)
  .then((response) => {
    if (!response.ok) {
      throw new Error(
        `This is an HTTP error: The status is ${response.status}`
      );
    }
    return response.json();
  })
  .then(console.log)
  .catch((err) => {
    console.log(err.message);
  });

fetch의 경우, catch()가 발생하는 경우는 오직 네트워크 장애 케이스이다. 따라서 개발자가 일일히 then() 안에 모든 케이스에 대한 HTTP 에러 처리를 해야한다.

마지막으로

그동안에 항해99 오기 전에는 fetch를 많이 사용했는데, 이러한 단점이 존재하는지는 생각치도 못했다.