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
반응형
'Front-end > JavaScript' 카테고리의 다른 글
12 - 3.63 의 비밀을 알고 싶다. (0) | 2024.04.19 |
---|---|
자바스크립트 비밀번호 정규식 2023ver (0) | 2023.09.18 |
배열중 가장 작은 날짜값 뽑아내기, 가장 큰 날짜값 뽑아내기 (0) | 2023.09.05 |
배열 합치기, 배열 중복 제거하기 (0) | 2023.09.05 |
[파일다운로드 두가지 방법] javascript로 다운로드 / buffter 받아서 다운로드 (0) | 2023.01.17 |
댓글