[React] 비동기 통신 - fetch (+ axios에 비해 불편한 점)

240219 TIL 🎶

 

---

 

대표적인 비동기 통신 방법으로는 

axios와 fetch가 있다.

이번에는 fetch에 대해 알아보고 이 라이브러리가 axios에 비해 가진 단점을 알아보자 :)

 

Fetch

먼저 Fetch는,
ES6부터 도입된 Javascript 내장 라이브러리로, Promise 기반 비동기 통신 라이브러리이다.
내장 라이브러리이기 때문에 (axios와 달리) 별도의 설치 및 import가 필요하지 않다

• BUT, axios에 비해 단점이 있다.
  • 미지원 브라우저 존재
  • 개발자에게 불친절한 response
  • axios에 비해 부족한 기능

 

 

 

 axios에 비해 불편한 단점은 크게 다음의 두 케이스에서 볼 수 있다.

  1) 데이터를 읽어올 때   

  2) 에러 처리 시   

 

 

 

   1) 예를 들어,  데이터를 읽어올 때의 단점은,

• 아래와 같이 json으로 (귀찮게..ㅎㅎ) 따로 변환해줘야 한다는 점이다!  두개의 .then() 이 필요   

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

• (반면  axios는 응답을 기본적으로 json포맷으로 제공해줌)

 

 

 

2) 에러 처리 시, 개발자가 일일히 then ( ) 안에 모든 케이스에 대한 http 에러 처리를 해야 한다..! 

(catch( ) 가 발생하는 경우는 네트워크 장애 케이스일 뿐)

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);
  });

 

 

- (반면 axios는 곧바로 에러 핸들링이 가능. 에러 객체가 response를 상세하게 준다.  const { status, config } = err.response; 이런 식으로)