axios vs fetch

"fetch 와 axios는 모두 HTTP 요청을 보내는 데 사용되는 도구이다."

 

fetch

ES6 부터 들어온 JavaScript 내장 라이브러리이다.
Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽고, 내장 라이브러릴라는 장점으로
상당히 편리하다.

 

fetch("https://localhost:8080/user/post", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    id: "jiho",
    description: "hello jiho",
  }),
}).then((response) => console.log(response));

 

 

fetch의 장점

 

1. 자바스크립트의 내장 라이브러리이므로 별도로 import할 필요가 없다.

2. Promise 기반으로 만들어졌기 때문에 데이터 다루기가 편리하다.

3. 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능하다.

 

fetch의 단점

 

1. 지원하지 않는 브라우저가 존재한다.

2. 네트워크 에러 발생 시 response timeout이 없어 기다려야 한다. -> 그렇다고 단점이라고 하기에는 

AbortController 인터페이스를 통해서 제어가 가능하다. -> 귀찮아진것은 맞다. ㅋㅋ

 

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

 

3. JSON으로 변환해주는 과정이 필요하다.

4. 상대적으로 axios에 비해 기능이 부족하다.

 

axios

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

 

axios({
  method: 'post',
  url: 'https://localhost:8080/user',
  data: {
    userName: 'jiho',
    userId: 'jiho112'
  }
}).then((response) => console.log(response));

 

axios의 장점

 

1. response timout (fetch에는 AbortController) 처리 방법이 있어 서버 미응답시 설정이 간단하다.

2. Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리하다.

3. 크로스 브라우징 최적화로 브라우저 호환성(구형 브라우저 지원)이 뛰어나다.

 

axios 단점

 

1. 사용을 위한 모듈 설치가 필요하다.

 

npm을 사용하여 설치

npm install axios

 

yarn을 사용하여 설치

yarn add axios

 

이후, 프로젝트에서 import 작성

import axios from "axios";

 

 

 

성능

 

 

위에서 확인할 수 있듯이 native fetch가 axios 보다 살짝 빠르다. 두 클라이언트 모두 비동기 이기 때문에 크게 중요하지 않다.

하지만 불러오는 데이터가 무겁다면 비동기라고 해도 속도 차이가 있을 수가 있다는 점은 고려해야 한다.

 

 

 

 

결론

결국, 어떤 프로젝트를 하느냐 그리고 개발자의 성향 등을 종합적으로 고려하여 두 가지 중 선택해서 사용하면 된다.

 

참고:

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

https://tlsdnjs12.tistory.com/26