fetch와 Axios 비교

Today, What I learned?

Axios 라이브러리를 알게 되었다. 이전에도 넌지시 들어는 봤지만 이번 기회로 제대로 접하게 되었다는 말이 더 맞겠다.

Axios를 알고나니 fetch와 어떤 차이가 있길래? Axios가 성능이 더 좋은가?? 같은 것들이 궁금해져서 한번 정리해보려 한다.

 

Axios

공식문서에서는 'Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다.' 라고 소개를 하고 있다.
즉 Promise를 기반으로 HTTP를 이용해서 서버와 비동기로 통신하는 라이브러리이다.

아래와 같은 키워드로 설치할 수 있다.

 

 

npm에서 사용할 경우

$ npm install axios

 

yarn에서 사용할 경우

$ yarn add axios

 

공식 문서는 이쪽에서 확인할 수 있다.
https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

 

 

Axios와 fetch 비교

개인적으로 토이 프로젝트를 진행할 때는 fetch를 사용했던지라, 두 라이브러리의 차이가 궁금했다.
공통적으로 Promise 기반이라는 특징이 있었다.

Axios는 fetch에 비해 보안쪽이나 여러 기능들을 추가적으로 제공한다는 점이 가장 두드러지는 차이 같은데, 표로 비교해보면 아래와 같다.

 

	Axios	fetch
설치	패키지 설치 필요	ES6부터 내장 라이브러리로 지원중
호환성	모던 브라우저에서 모두 지원 (IE 11까지도!)	대부분 지원. IE의 경우 지원하지 않는 버전도 존재
사이트 간 요청 위조(XSRF) 보호 기능	지원	미지원
JSON 데이터 자동 변환	지원	추가 로직 필요 (stringify 같은)
요청 취소, 타임아웃 등 기능	지원	없음
요청 인터셉트	가능	없음

 

물론 이 외에도 더 많겠지만 Axios 공식 문서에 나열된 일부 기능들만 봐도 이렇다.

fetch에 비해서 브라우저 호환성이 좋고, 추가적인 로직 구현 없이도 사용할 수 있는 기능들이 많아 Axios를 사용하는 경우가 많은 것 같다.

 

 

 

코드로 비교

fetch로 GET 호출

const getUser = async () => {
  try{
      const response = await fetch('/user?ID=12345')
  } catch (error){
    console.error(error);
  }
}

 

Axios로 GET 호출

const getUser = async() => {
  try {
    const response = await axios.get('/user?ID=12345');
  } catch (error) {
    console.error(error);
  }
}

GET 호출만 봐도 두 API를 사용하는 방식이 거의 비슷하다고 볼 수 있겠다. 🤔

 

 

그럼 무조건 fetch보다 Axios를 써야 하느냐? 🤔 그건 또 아니다.

React-Native 에선 업데이트가 빠른 편인지라 Axios가 이를 다 반영하지 못할 수 있어 좀 더 안정적인 fetch를 쓰는 것을 선호하는 경우가 많다고 한다.

쓰는 코드도 비슷한 편이니 경우에 맞게 사용해보도록 하자! 🙌