Javascript | Fetch vs Axios 차이점 비교

Javascript에서 HTTP Requests 를 위한 방법에는 Fetch 와 Axios 두가지가 있습니다. Fetch 가 Built-in APIs 로서 별도의 설치 없이 모던 브라우저에서 사용이 가능하지만, Axios 가 사용하기 쉽고 브라우저 하위 호환성 등 몇몇 이유로 인해 개발자들 사이에서 많이 사용이 되고 있는데요.

 

네이티브 APIs 를 선호하는 개발자라면 Fetch 를 별도의 설치나 임포트 없이 사용하고 싶어 할 것입니다.

그러나 Axios 에서 쉽게 구현이 가능한 기능들에 대해서 Fetch에서는 기본적으로는 제공이 되지 않거나, 추가적인 로직 구현이 필요한 것들도 있어 Axios를 사용하는 경우도 많은 것 같은데요.

 

그래서 Fetch 와 Axios 에 대한 각각의 특징과 어떤 차이점이 있는지? Fetch에서 지원되지 않는 부분에 대해서 어떤 방법으로 구현이 가능한지에 대해서 간단히 정리를 해볼려고 합니다.

Fetch

Fetch 는 Built-in APIs 로서 별도의 설치 없이 모던 브라우저에서 사용이 가능합니다. window object 에서 정의되어 있으며, HTTP Pipeline(Request/Response)를 위한 Javascript Interface 이며, Promise 객체를 return 합니다.

Axios

Axios 는 써드파티 라이브러리로서 추가적인 설치 및 임포트가 필요하지만, 그 과정이 어렵지 않으며 폭넓은 브라우저 호환성이 보장됩니다.

사용하기도 쉬워 많은 개발자들이 사용을 하고 있는 라이브러리입니다.

Fetch 와 Axios 차이

Fetch 와 Axios 에 대한 차이점과 Axios에서 가지고 있는 장점이나 쉽게 구현이 가능한 부분을 Fetch 에서는 어떻게 구현할수 있는지도 간단하게 정리해보겠습니다.

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://www.geeksforgeeks.org/difference-between-fetch-and-axios-js-for-making-http-requests/

출처 : https://yeonfamily.tistory.com/10