1-7 axios와 fetch의 비교

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

하지만 우리는 axios를 위주로 쓸거에요! fetch가 가진 단점 때문인데요, 아래와 같아요.

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

- 예시를 통해 보는 fetch와 axios의 차이
    
CASE 1. 데이터 읽어오기
    
1. fetch

const url = "https://jsonplaceholder.typicode.com/todos";
        
       fetch(url)
       .then((response) => response.json())
       .then(console.log);

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

2. axios

const url = "https://jsonplaceholder.typicode.com/todos";
        
axios.get(url).then((response) => console.log(response.data));

- axios는 친절하게도 응답(response)을 기본적으로 JSON 포맷으로 제공합니다. 우리는 단순히 response.data로만 사용하면 돼요.
    
CASE 2. 에러 처리
    
1. axios
        

const url = "https://jsonplaceholder.typicode.com/todos";
        
axios
  .get(url)
  .then((response) => console.log(response.data))
  .catch((err) => {
    console.log(err.message);
  });

- axios.get()요청이 반환하는 Promise 객체가 갖고있는 상태코드가 2xx의 범위를 넘어가면 거부(reject)를 합니다.
- 따라서, 곧바로 catch() 부분을 통해 **`error handling`**이 가능합니다. 예를들면 이렇게요!

const url = "https://jsonplaceholder.typicode.com/todos";
            
// axios 요청 로직
axios
  .get(url)
  .then((response) => console.log(response.data))
  .catch((err) => {
            
    // 오류 객체 내의 response가 존재한다 = 서버가 오류 응답을 주었다
    if (err.response) {
            
      const { status, config } = err.response;
            
      // 없는 페이지
      if (status === 404) {
        console.log(`${config.url} not found`);
      }
            
      // 서버 오류
      if (status === 500) {
        console.log("Server error");
      }
            
      // 요청이 이루어졌으나 서버에서 응답이 없었을 경우
      } else if (err.request) {
        console.log("Error", err.message);

      // 그 외 다른 에러
      } else {
        console.log("Error", err.message);
      }
    });

   
2. fetch 

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 에러 처리를 해야합니다.