비동기 요청 방식 Fetch와 Axios 차이

이번 기업협업을 진행하며 기존에 사용했던 비동기요청 함수 Fetch 대신 Axios를 사용하고 있는 걸 확인할 수 있었다. Fetch와 크게 다른 점은 없었지만 instance화, interceptor, 자동 JSON화 기능에서 편리함을 크게 느꼈다. 그래서 기존에 사용하던 fetch와의 차이점을 알아보기 위해 정리를 해보았다.

Fetch

Fetch는 built-in APIs로서 별도의 설치 없이 모던 브라우저에서 사용이 가능하며 ES6부터 자바스크립트의 내장 라이브러리로 들어왔다.
promise 기반으로 만들어졌기 때문에 Axios와 마찬가지로 데이터를 다루는데 어렵지 않으며 간단하다.

장점

1. 별도의 설치가 필요 없이 모던 브라우저에서 사용이 가능하다.
2. promise 기반으로 다루기가 쉽다.
3. 내장 라이브러리이기에 사용하는 프레임워크가 안정적이지 않을 때 사용하기 좋다.

단점

1. fetch를 지원하지 않는 브라우저 버전도 존재한다.
2. 기능이 부족하다

Axios

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

장점

1. 폭넓은 브라우저를 지원한다.
2. 자동으로 JSON 데이터로 변환을 지원한다.
3. XSRF Protection 보안기능을 제공한다.
   (XSRF: 웹사이트 취약점 공격의 하나로, 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위를 특정 웹사이트에 요청하도록 공격하는 것을 말한다)
4. intercept 기능을 제공한다.
5. reponse timeout 처리 방법이 있다.

단점

1.모듈 설치를 해야한다

결론

Axios는 크로스 브라우징 이슈에도 좋으며 여러가지 기능을 탑재한 Fetch의 상위호환 라이브러리라고 생각한다. 설치 또한 간단하니 안정적인 프레임워크 하에선 Axios를 사용하는 게 생산성에서 더 뛰어나다고 할 수 있을 것 같다.