[React] axios와 fetch 비교

axios

개념

• 공식문서에서는 "axios는 Promise based HTTP client for th borwser and node.js" 라고 설명한다.
• 즉, node.js와 브라우저를 위한 HTTP 통신 라이브러리라고 할 수 있다.

장점

• 간결하고 직관적인 API: axios는 Promise 기반의 API를 제공하므로 비동기 작업을 더 쉽게 다룰 수 있다.
• 브라우저 및 Node.js에서 모두 사용 가능: axios는 브라우저 및 Node.js에서 모두 사용할 수 있으며, 둘 모두에서 동작하는 일관된 API를 제공한다.
• 요청 및 응답 인터셉터: axios는 요청 및 응답을 인터셉트하여 중간에 변형하거나 에러 처리 등을 수행할 수 있는 기능을 제공한다.
• 다양한 플랫폼 및 환경 지원: axios는 HTTP 요청 및 응답을 다양한 플랫폼과 환경에서 처리할 수 있도록 지원한다.

사용 예시

fetch

개념

• fetch는 웹 브라우저에서 제공하는 API로, JavaScript에서 HTTP요청을 처리하는 기본적인 방법이다.

장점

• 내장 API: fetch는 웹 브라우저에 내장된 API로 별도의 라이브러리를 추가로 설치할 필요가 없다.
• Promise 기반: fetch도 Promise를 사용하여 비동기적인 HTTP 요청을 처리할 수 있다.
• 간단한 사용법: fetch는 간단하고 직관적인 API를 제공하여 HTTP 요청을 보내고 응답을 처리할 수 있다.

사용 예시

axios와 fetch 비교

axios	fetch
요청 객체에 url이 있다.	요청 객체에 url이 없다.
라이브러리 설치가 필요하다.	라이브러리 설치가 필요없다.
XSRF 보호를 해준다	별도 보호 없다.
data 속성을 사용한다.	body 속성을 사용한다.
data는 object를 포함한다.	body는 문자열화 되어있다.
status가 200이고, statusText가 ‘OK’이면 요청 성공이다.	응답객체가 ok 속성을 포함하면 요청 성공이다.
자동으로 JSON데이터 형식으로 변환된다.	.json()메서드를 사용해야 한다.
요청을 취소할 수 있고 타임아웃을 걸 수 있다.	해당 기능이 존재하지 않는다.
HTTP 요청을 가로챌수 있다.	해당 기능이 존재하지 않는다.
download진행에 대해 기본적인 지원을 한다.	해당 기능이 존재하지 않는다.
HTTP 요청을 가로챌수 있다.	해당 기능이 존재하지 않는다.

혼자 공부하면서 axios도 사용해보고 fetch도 사용해봤는데, 위와 같은 차이점과 axios의 활용성이 더 좋아서 axios를 더 자주 사용할 것 같다.