AXIOS와 FETCH API의 차이점

axios랑 fetch랑 둘다 url를 연결하는거인 것 같은데 기능적인 면에서 어떤 차이점이 있는지 정리해보자.

 

 

Axios와 Fetch는 모두 웹 요청을 수행하는 JavaScript 라이브러리 및 API입니다. 그러나 두 라이브러리 사이에는 몇 가지 중요한 차이점이 있습니다:

사용법 및 편의성:

Fetch: Fetch API는 기본 JavaScript API로 브라우저에 내장되어 있으며, Promises를 사용하여 비동기 요청을 처리합니다. 그러나 기본 fetch API는 요청 설정 및 오류 처리 등을 수동으로 처리해야 하므로 초기 학습 곡선이 높을 수 있습니다.
Axios: Axios는 더 높은 수준의 추상화를 제공하며, 브라우저 및 Node.js에서 사용할 수 있습니다. Axios는 강력한 기능을 갖추고 있으며, 요청 설정, 오류 처리, 중복 요청 취소, 요청 취소 등을 쉽게 처리할 수 있어 사용자 친화적입니다.
브라우저 호환성:

Fetch: Fetch API는 모던 브라우저에서 기본적으로 사용 가능하지만, 오래된 브라우저에서는 지원되지 않을 수 있으며, 이러한 브라우저를 지원하려면 폴리필(polyfill)을 사용해야 할 수도 있습니다.
Axios: Axios는 모든 주요 브라우저와 Node.js에서 사용 가능하며, 브라우저 호환성에 대해 걱정할 필요가 없습니다.
HTTP 요청 취소:

Fetch: Fetch API는 기본적으로 HTTP 요청을 취소할 수 있는 내장 메커니즘을 제공하지 않습니다. 요청을 취소하려면 AbortController를 사용해야 합니다.
Axios: Axios는 요청 취소를 쉽게 처리할 수 있는 CancelToken을 제공하며, 요청을 중단할 수 있습니다.
인터셉터(Interceptors):

Axios: Axios는 요청과 응답에 대한 인터셉터(interceptors)를 제공하여 요청 또는 응답을 수정하거나 처리할 수 있습니다.
Fetch: Fetch API에는 기본적으로 인터셉터 메커니즘이 내장되어 있지 않으므로 사용자 정의된 작업을 수행하려면 더 많은 작업이 필요합니다.
JSON 파싱:

Fetch: Fetch API를 사용할 때, JSON 데이터를 파싱하기 위해 response.json()을 호출해야 합니다.
Axios: Axios는 기본적으로 JSON 데이터를 자동으로 파싱하고 사용자에게 JSON 객체로 제공합니다.
설정 및 헤더:

Fetch: 요청 설정과 헤더를 설정하기 위해 추가적인 코드 작업이 필요합니다.
Axios: Axios는 설정 및 헤더 설정을 더 쉽게 처리할 수 있도록 인터페이스를 제공합니다.
따라서 Axios는 특히 브라우저 호환성, 편의성, 요청 취소 및 인터셉터와 같은 고급 기능이 필요한 경우에 유용할 수 있으며, Fetch는 간단한 요청을 수행하거나 브라우저에 기본적으로 내장된 API를 사용하고자 할 때 유용할 수 있습니다. 선택은 프로젝트 요구 사항과 개발자의 선호도에 따라 달라집니다.