fetch와 axios 차이점과 비교

 

저번에 API에 대해서 알아봤습니다.

자바스크립트에서 HTTP Requests를 위한 방법이 두가지가 존재하는데

 

🎁  오늘은 어떤것이 존재하고 어떤 차이점이 존재하는지 알아보겠습니다.  🎁 

 

 

 

---

💖 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 단점

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

 

 

 

 

---

📑 fetch와  axios 차이

 

Axios	Fetch
써드파티 패키지로 설치 쉽습니다. npm install axios	Built-in APIs 로 별도의 설치 필요 없이,  모던 브라우저에서 사용 가합니다.
wide browser 지원	오직 크롬 42+, firefox 39+, edge 14+, safari 10.1+ 지원. polyfill 이용해서 하위 호환성 지원 가능
XSRF Protection 보안 기능 제공	없음.
자동 JSOM 데이터 변환 지원	JSON 데이터 핸들링 위해 추가 절차 필요. Fetch interface 의 json() 이용하는 로직 추가하여 가능
Request 취소 와 Request Timeout 설정 가능	없음. AbortController 이용하여 구현 가능
HTTP Requests 의 Intercept 가능	Intercept Requests 기본적으로 제공되지 않음. Global Fetch Method를 Overwrite 하여 나의 인터셉터 정의 가능
Download Progress 지원	Upload Progress 지원안함.  Response Object의 Body Property 통해 제공되는 ReadableStream 인스턴스 이용 가능

 

 

 

---

 

https://tlsdnjs12.tistory.com/25

API란?