fetch vs axios

• fetch
  • 장점
    • ES6로부터 들어온 JavaScript 내장 라이브러리 
      • 별도의 import 필요 없음
      • 업데이트에 따른 에러 방지 가능
      • 프레임워크가 안정적이지 않을 때 사용하기 좋음
    • promise 기반으로 만들어짐 => 데이터 다루기 편리
  • 단점
    • 지원하지 않는 브라우저 존재(IE11 등)
    • 네트워크 에러 발생 시 response timeout이 없어 기다려야 함
    • JSON으로 변환해주는 과정 필요
    • 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));

 

• axios
  • 장점
    • response timeout (fetch에 없는 기능) 처리 방법이 존재함
    • promise 기반으로 만들어짐 => 데이터 다루기 편리
    • 크로스 브라우징 최적화로 브라우저 호환성(구형 브라우저 지원)이 뛰어남
  • 단점 
    • 모듈을 설치해야 함

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

 

 

Axios	Fetch
패키지 설치가 편리(npm install axios)	Built-in-APIs로 별도의 설치 필요 없음
wide browser 지원	오직 크롬 42+, firefox 39+, edge 14+, safari 10.1+ 지원. polyfill 이용해서 하위 호환성 지원 가능
XSRF Protection 보안 기능 제공	X
자동 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 인스턴스 이용 가능

 

 

결론

 

웹 프론트 프레임워크(react js,vue js 등)을 다룰때에는 Axios를 사용하는 것이 더 좋음

( Axios는 크로스 브라우징에 신경을 많이 쓴 모듈인게 눈에 보이며, 기능또한 우수하기 때문)

다만, react-native에서는 fetch를 사용하는 것이 아주 조금 더 좋음

( react-native의 경우 아직 안정화 된 프레임워크가 아니기에 지속적인 version update가 진행되고 있고, axios에서 이를 반영하지 못할 경우 생각지 못한 에러가 발생할 수 있다는 우려 때문)

 

 

참고 : https://velog.io/@kysung95