fetch vs axios

Fetch

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

 

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

 

Fetch 장점

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

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

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

 

 

Fetch 단점

1. 지원하지 않는 브라우저가 존재 (IE11...)

2. 네트워크 에러 발생 시 response timeout이 없어 기다려야 합니다.

3. JSON으로 변환해주는 과정 필요합니다.

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

 

 

 

 

---

 

 

Axios

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

 

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

 

 

Axios 장점

1. response timeout (fetch에는 없는 기능) 처리 방법이 존재입니다.

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

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

 

 

Axios 단점

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