Fetch / Axios 비교

Fetch를 주로 사용하다 Axios를 왜 쓰는걸까 궁금해하던 차에 특징을 비교해보고자 합니다.

 

자바스크립트에서 HTTP 통신을 위해 Fetch API를 제공합니다. 이전에는 XMLHttpRequest 객체를 통해 AJAX 를 했습니다.

AJAX란,서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것입니다. (Asynchronous JavaScript And XML)

 

웹 2.0이 시작되면서 AJAX를 사용하여 동적인 웹이 되었고 비동기 처리를 위해 콜백함수를 사용했습니다.

콜백지옥으로 문제가 되니

비동기 데이터를 다루는 객체인 Promise가 나타났습니다.

 

Fetch 와 Axios

Fetch는 HTTP통신을 할 수 있도록 자바스크립트에서 제공하는 API로 Promise값을 반환하여 통신결과를 반환합니다.

반면, Axios는 Promise API를 활용하는 HTTP 통신 라이브러리입니다. Promise값을 반환하는 것은 같으나 세부적인 동작이 다릅니다.

 

JSON 자동변환

GET

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

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

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

axios.get(url)
  .then((response) => console.log(response.data));

Axios는 response를 json으로 자동 변환하여 반환합니다.

그렇기에 좀 더 빠르게 코드를 작성하고 읽기에도 편합니다.

 

POST

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

const todo = {
  title: "A new todo",
  completed: false,
};

fetch(url, {
  method: "post",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(todo),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

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

const todo = {
  title: "A new todo",
  completed: false,
};

axios
  .post(url, {
    headers: {
      "Content-Type": "application/json",
    },
    data: todo,
  })
  .then(console.log);

Fetch의 POST요청에는 body에 작성해야하고, JSON문자열로 변환하는 과정을 거칩니다.

반면, Axios는 data에 자바스크립트 객체를 그대로 넣습니다.

 

Browser version

ES6에서 Promise 개념이 추가 된 이후 생겨난 API입니다. 별도 설치 없이 모던 브라우저내에서 사용이 가능합니다.

하지만, 특정 브라우저 버전에서는 사용할 수 없습니다. 

생겨난지 오래된 API이지만, 혹시나 업데이트를 장기간 하지 않은 브라우저를 사용하는 사용자나

글로벌 서비스시에 낙후된 PC 및 소프트웨어를 사용하는 환경에서 정상적으로 동작하지 않을 가능성이 있습니다.

 

Axios는 npm 서드파티로서 npm을 통해 설치를 합니다.

polyfill을 통해 위와 같은 문제를 해결할 수 있습니다. (fetch-polyfill도 존재하지만, axios를 설치하는 편이 낫다고 판단합니다.)

 

에러처리

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

axios
  .get(url)
  .then((response) => console.log(response.data))
  .catch((err) => {
    console.log(err.message);
  });

Axios의 Promise는 상태코드가 2xx의 범위를 벗어나면 Promise를 reject 하고 에러 응답을 반환합니다. 

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

fetch(url)
  .then((response) => response.json())
  .then(console.log);
  .catch((err) => {
  // 에러 처리
  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);
    }
});

Fetch는 404 에러나 다른 HTTP 에러 응답을 받았다고 해서 Promise를 reject 하지 않습니다. Fetch는 네트워크 장애가 발생한 경우에만 Promise를 reject 합니다. 따라서 .then절을 사용해 수동으로 HTTP 에러를 처리해야 합니다.

 

Timeout 설정

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

axios
  .get(url, {
    timeout: 4000, // 기본 설정은 '0'입니다 (타임아웃 없음)
  })
  .then((response) => console.log(response.data))
  .catch((err) => {
    console.log(err.message);
  });

Axios의 경우 timeout을 옵션으로 바로 설정할 수 있습니다.

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

const controller = new AbortController();
const signal = controller.signal;
setTimeout(() => controller.abort(), 4000);

fetch(url, {
  signal: signal,
})
  .then((response) => response.json())
  .then(console.log)
  .catch((err) => {
    console.error(err.message);
  });

Fetch는 AbortController를 생성한 뒤 timeout을 위와같은 형태로 적용할 수 있습니다.

 

추가로,

Axios는

HTTP 요청을 intercept 할 수 있고,

XSRF Protection 보안 기능도 제공합니다.

 

요약

저는 이번 프로젝트에 axios를 적용했습니다.

최근 코드 가독성을 굉장히 중요하게 여기고 있습니다.

코드 가독성은 단순히 읽기 좋다고만 해석될 수 있지만, 다른 사람들이 빠르게 읽고 이해할 수 있다는 것은

협업의 생산성 향상으로 직결되고, 유지보수 생산성 증가로 이어져 서비스 개발속도에 영향을 줍니다.

단순히 JSON 변환을 하고 에러 catch를 하는 것으로 복잡해지고 

많은 Fetch 구문을 작성하고 사용하다보면 더욱이 혼란스럽고 함수화를 가져가야한다는 문제점이 추가로 발생합니다.

그리고 HTTP Request를 쉽게 intercept하여 확장 가능성을 한번 이용해보고 싶었습니다.

 

위와 같은 이유로 Axios를 사용하려 합니다. 이후, 프로젝트가 끝났을 때 위와 같은 이유들이 잘 부합했는지

내 생각대로 잘 진행됐는지 결과는 어떤지 평가하는 시간을 가지려합니다.

 

 

참고

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Fetch 사용하기 - Web API | MDN

https://tlsdnjs12.tistory.com/26

fetch와 axios 차이점과 비교

https://velog.io/@eunbinn/Axios-vs-Fetch

[번역] 입문자를 위한 Axios vs Fetch