본문 바로가기
Front-end/JavaScript

axios와 fetch의 차이, 장점, 단점

by 꼬바리 2023. 10. 31.

axios와 fetch는 둘 다 JavaScript에서 네트워크 요청을 처리하는 방법 중 하나로, 각각의 장점과 단점이 있습니다.

axios:

장점 간편한 에러 핸들링: axios는 HTTP 요청 중에 발생하는 에러를 쉽게 처리할 수 있도록 해줍니다. 예를 들어, 요청 실패, 타임아웃, 네트워크 에러 등에 대한 처리가 간단합니다.
  요청과 응답 인터셉터: axios는 요청과 응답을 가로채고 변형시키는 데 사용할 수 있는 인터셉터(Interceptor)를 제공합니다. 이를 통해 요청과 응답의 전/후 처리를 커스터마이즈할 수 있습니다.
  자주 사용되는 설정: axios는 기본적인 설정을 가지고 있으며, JSON 파싱, 쿠키 설정, 헤더 설정 등을 쉽게 할 수 있습니다.
  크로스 브라우징: axios는 다양한 브라우저에서 일관된 방식으로 동작하도록 보장하는 XHR(XMLHttpRequest) 및 Promise 기반의 라이브러리입니다.
단점 번거로운 설치: axios를 사용하려면 별도의 라이브러리 설치가 필요합니다.


fetch

장점 기본 브라우저 기능: fetch는 모던 브라우저에 내장된 표준 웹 API이므로 별도의 라이브러리 설치가 필요하지 않습니다.
  Promise 기반: fetch는 Promise 기반의 API이기 때문에 비동기 코드를 보다 간결하게 작성할 수 있습니다.
  가벼움: fetch는 브라우저에 내장되어 있어 번들 크기를 줄일 수 있습니다.
단점 기본 설정의 부족: fetch는 기본적으로 JSON 파싱과 기타 설정을 제공하지 않아 사용자가 직접 설정을 해야 합니다.
  HTTP 에러 처리 어려움: fetch는 네트워크 요청에 대한 기본적인 HTTP 에러 처리를 제공하지 않아, 사용자가 직접 처리해야 합니다.
  IE 호환성: fetch는 IE(Internet Explorer)에서 지원되지 않는 경우가 있으므로, IE 호환성을 유지해야 하는 경우 추가 작업이 필요합니다.



fetch와 axios 중 어떤 것을 선택할지는 프로젝트의 요구 사항과 개발자의 경험에 따라 다를 수 있습니다. 간단한 요청을 보낼 때는 fetch가 편리하며, 좀 더 복잡한 요청 및 에러 처리가 필요한 경우 axios와 같은 라이브러리를 고려할 수 있습니다. 또한, 모던 브라우저에서 작업하는 경우 fetch를 사용하여 번들 크기를 줄이고 리소스를 절약할 수 있습니다.

728x90
반응형

댓글