axios vs fetch

박찬영·2024년 2월 23일

fetch , axios 가 나온 이유

기존 WEB에서 어떤 리소스를 비동기로 요청하기 위해서는 XHR(XML HTTP Request)객체를 사용했어야 했었는데, XHR은 잘 디자인되어 있는 API가 아닙니다. 요청의 상태나 변경을 구독하려면 Event를 등록해서 변경사항을 받아야 했고 요청의 성공, 실패 여부나 상태에 따라 처리하는 로직이 들어가기 좋지 않았습니다.
이를 보완하기 위해 HTTP 요청에 최적화 되어 있고 상태도 잘 추상화 되어 있는 api들이 생겨나기 시작했습니다. 그 생겨난 것들중 fetch, axios 가 있습니다.

🐣 fetch

ES6부터 들어온 JavaScript 내장 라이브러리입니다.
fetch 는 네트워크 요청을 보내고 응답을 받는 기능을 제공합니다.
Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽고, 내장 라이브러리라는 장점으로 상당히 편리합니다.

Promise는 비동기 작업의 결과를 나타내는 객체로, 이행(fulfilled) 또는 거부(rejected) 두 가지 상태 중 하나를 가집니다. Fetch API는 네트워크 요청을 보내고 해당 요청에 대한 Promise를 반환하여 비동기적으로 응답을 처리합니다.

fetch("https://localhost:3000/user/post", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    email: "abc123",
    text: "hello world",
  }),
}).then((response) => console.log(response));

fetch 의 장점, 단점

👍 장점

자바스크립트 내장 라이브러리이므로 별도의 import 가 필요가 없습니다.
내장 라이브러리라는 장점 때문에 업데이트에 의한 오류를 신경 쓸 필요가 없습니다.

👎 단점

fetch 를 지원하지 않는 라이브러리가 존재합니다.
JSON 으로 변환해주어야 하는 과정이 추가적으로 있습니다.
상대적으로 axios에 비해 기능이 부족합니다.

🐥 axios

axios는 Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리입니다.
비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽습니다

const axiosData = async () => {
	const response = await axios.get('http://localhost:3000/user')
    return response.data
}

axios 의 장점, 단점

👍 Axios 장점

response timeout (fetch에는 없는 기능) 처리 방법이 존재입니다.
Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리합니다.
크로스 브라우징 최적화로 브라우저 호환성(구형 브라우저 지원)이 뛰어납니다.

👎 Axios 단점

사용을 위해 모듈 설치 필요합니다. (npm install axios)

response timeout
요청에 대한 응답 시간 초과(timeout)를 처리하기 위한 옵션

크로스 브라우징
웹 브라우저는 제조사나 버전에 따라 구현된 기능이나 렌더링 엔진이 서로 다를 수 있습니다.
이로 인해 같은 코드가 서로 다른 브라우저에서 다르게 해석되거나 동작할 수 있습니다.
크로스 브라우징은 이러한 브라우저 간의 차이를 최소화하여 모든 사용자가 웹 페이지를 일관되게 볼 수 있도록 하는 작업입니다.

// 아주 간단한 response timeout

axios.get('https://api.example.com/data', {
  timeout: 5000 // 5초
}).then(response => {
    return console.log(response.data)
  }).catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      console.log('Timeout Error:', error);
    }
  });

나의 결론

결국 저는 React 를 쓰는 개발자로써 axios 를 사용합니다.
크로스 브라우징, reponse timeout 같은 좋은 기능을 쓸 수 있으며, JSON 으로 변환해주는 작업도
필요하지 않기 때문입니다. 나중에 axios 보다 좋은 라이브러리가 나오면 어떨까 하는 생각도 해봅니다.