Fetch

ES6부터 들어온 JavaScript 내장 라이브러리다.

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 통신 라이브러리다.

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
써드파티 패키지로 설치가 쉽다.	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/26