Javascript에서 HTTP Requests를 위한 방법에는 Fetch와 Axios 두가지가 있습니다. Fetch가 Built-in APIs로서 별도의 설치 없이 모던 브라우저에서 사용이 가능하지만 Axios가 사용하기 쉽고 브라우저 하위 호환성 등 몇몇 이유로 인해 개발자들 사이에서 많이 사용되고 있습니다.
네이티브 APIs를 선호하는 개발자라면 Fetch를 별도의 설치나 임포트 없이 사용하고 싶어할 것입니다. 그러나 Axios에서 쉽게 구현이 가능한 기능들에 대해서 Fetch에서는 기본적으로 제공이 되지 않거나 추가적인 로직 구현이 필요한 것들도 있어 Axios를 사용하는 경우도 많습니다.
Fetch
Fetch는 Built-in APIs로서 별도의 설치 없이 모던 브라우저에서 사용이 가능합니다. window object에서 정의되어 있으며, HTTP Pipeline(Request/Response)를 위한 Javascript Interface이며, Promise 객체를 return 합니다.
Axios
Axios는 써드파티 라이브러리로서 추가적인 설치 및 임포트가 필요하지만 그 과정이 어렵지 않으며 폭넓은 브라우저 호환성이 보장됩니다. 사용하기도 쉬워 많은 개발자들이 사용을 하고 있는 라이브러리입니다.
Fetch와 Axios 차이
| Axios | Fetch |
|---|---|
| 써드파티 패키지로 설치가 쉬움 | Built-in APIs로 별도의 설치 필요 없이, 모던 브라우저에서 사용 가능 |
| wide browser 지원 | 오직 chrome 42+, firefox 39+, edge 14+, safari 10.1+ 지원, polyfill 이용해서 하위 호환성 지원 가능 |
| XSRF Protection 보안 기능 제공 | 없음. |
| 자동 JSON 데이터 변환 지원 | 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, vue)를 다룰때에는 Axios를 사용하는 것이 더 좋다고 생각하며 Axios 크로스 브라우징에 신경을 많이 쓴 모듈이면서 기능 또한 우수하기 때문입니다.
다만, react-native에서는 fetch를 사용하는 것이 조금 더 좋다고 생각합니다. react-native의 경우 아직 안정화 된 프레임워크가 아니기에 지속적인 version update가 진행되고 있고, axios에서 이를 반영하지 못할 경우 생각지 못한 에러가 발생할 수 있다는 우려 때문입니다.
