소개
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 인스턴스 이용 가능 |