axios와 fetch 의 비교

axios와 fetch 특징 비교

1. 브라우저 호환성
   axios는 IE 11과 같은 오래된 브라우저와도 호환됩니다. 그러나 fetch는 IE 11을 지원하지 않습니다.
2. API 디자인
   fetch는 내장된 JavaScript API이기 때문에 API 디자인이 상대적으로 직관적입니다. 그러나 Axios는 더 많은 기능을 제공하며 요청 및 응답을 인터셉트하는 기능, 요청 취소 및 설정 변경 등을 쉽게 수행할 수 있습니다. 따라서 Axios는 더 편리하게 작업할 수 있는 API 디자인을 가지고 있다고 볼 수 있습니다.
3. 프로미스 반환
   axios는 프로미스를 반환하므로 요청을 연결하고 체이닝할 수 있습니다. fetch는 프로미스를 반환하지만, 체이닝을 위해 추가적인 노력이 필요합니다.
4. 요청 취소 기능
   axios는 요청을 취소하는 기능을 제공합니다. 반면에 fetch는 이를 지원하지 않습니다.
5. CSRF 보호
   axios는 CSRF 공격에 대한 보호를 제공합니다. 이를 위해, axios는 사용자 인증 정보를 포함하는 쿠키를 자동으로 설정하고, 서버에서 발행한 CSRF 토큰을 사용합니다. 반면에 fetch는 이를 지원하지 않으며, 개발자가 직접 처리해야 합니다.
6. 자동 변환 기능
   axios는 서버에서 받은 데이터를 자동으로 JSON으로 변환해줍니다. 반면에 fetch는 이를 지원하지 않으며, 개발자가 수동으로 처리해야 합니다.
7. 브라우저 캐싱 및 요청
   axios는 브라우저 캐싱과 요청을 자동으로 처리합니다. 반면에 fetch는 이를 지원하지 않으며, 개발자가 수동으로 처리해야 합니다.

 

axios보다 fetch가 더 좋은점 

fetch는 기본적으로 브라우저 내장 API이므로, 별도의 라이브러리를 설치하지 않아도 사용할 수 있습니다. 이를테면 React 애플리케이션에서 fetch를 사용하는 경우, 추가적인 라이브러리를 설치할 필요가 없습니다.

또한, fetch는 Axios와 달리 브라우저 API이므로 브라우저 캐싱과 요청 처리를 자동으로 수행합니다. 또한, fetch는 프로미스를 반환하므로 요청을 체이닝하여 사용할 수 있습니다.

또한 fetch는 Axios보다 더욱 직관적인 API 디자인을 가지고 있습니다. Axios는 복잡한 API를 가지고 있기 때문에 초기 학습 곡선이 높을 수 있습니다.