230120 항해99 75일차 Fetch vs Axios

자바스크립트에서 HTTP Requests를 위한 방법에는 fetch와 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의 단점

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

---

Fetch vs Axios

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

---

참조: fetch와 axios 차이점과 비교