fetch와 aixos의 차이에 대해서 간략하게 이해한다.
fetch는 Built-in APIs로써 별도의 설치 없이 모던 브라우저에서 사용이 가능하다. window object에서 정의되어 있으며, Promise 객체를 return 한다.
axios에서 쉽게 구현이 가능한 기능들에 대해서 fetch에서는 기본적으로 제공되지 않거나, 추가적인 로직 구현이 필요한 경우가 많다. 나는 개발 공부를 하면서 fetch보다는 axios를 주로 사용하기도 했다. 그래서 바로 axios에 대해서 알아보려고 한다.
axios는 써드파티 라이브러리로써 추가적인 설치 및 임포트가 필요하다.
import axios from "axios";
오늘 이 둘의 차이점에 대해 블로깅한 이유는 사실 이 부분에 있다. fetch는 JSON 데이터의 핸들링을 위해 추가 절차가 필요하다. 즉, fetch interface의 json()을 이용하는 로직을 추가하여야 한다.
반면에 axios는 자동으로 JSON 데이터 변환을 지원한다.
// fetch
const url = "https://useonglee.com";
const data = fetch(url).then((res) => res.json());
// axios
const url = "https://useonglee.com";
const data = fetch(url).then((res) => res);
코드로 간략하게 예시를 들자면 이렇다. 나는 실제로 fetch를 사용해야 하는 상황에서 json()이 떠오르지 않아서 크게 낭패를 본 경험이 있다. 아마 이 둘의 가장 큰 차이점은 이 부분이 아닐까 싶다..
참고 자료