Axios 요청과 fetch 요청의 차이

 

현재 작업 중인 프로젝트에서 우리 팀은 클라이언트 서버 간 요청 방식을 axios로 통일하기로 합의하였다. 

 

그러다 문제를 겪고있던 기능을 stack overflow에서 친절하게 설명한 글을 읽게 되었다. 

 

해당 코드를 사용하면 모든 것이 해결되는 것이었으나... 문제는 fetch함수를 사용해 설명을 했기 때문에

 

작업 중인 어플에서 사용하려면 axios로 변경을 해줘야 하는 상황이었다.

 

사실 그냥 fetch로 사용해버릴까... 하다가 fetch를 axios로 변경하는 방법을 몰라서 fetch를 사용한다면

 

자존심이 용납을 못하는 것이기에 이번 기회에 한번 fetch와 axios의 차이점과 변환 방법을 알아보았다. 

 

---

fetch 예시

const upload = await fetch (url, {
      method:"PUT",
      headers: {
        "Content-Type": "multipart/form-data"
      },
      body: bucketImage
})

 

Axios 예시

const upload = await axios (url, {
      method:"PUT",
      headers: {
        "Content-Type": "multipart/form-data"
      },
      data: bucketImage
})

 

사실 코드상 별다른 차이점은 없다. 다만 fetch의 경우 body를 body로 받는 대신 axios는 data로 받는 점만 주의하면 된다. 

---

Axios와 fetch의 차이

 

1. 내장 라이브러리 vs 외부 라이브러리

fetch는 ES6 내장 라이브러리로 별도의 설치없이 사용 가능하다. 반면 axios는 외부 라이브러리라 별도의 설치가 필요하다. 

 

2.  JSON 변환여부

axios는 데이터를 주고받을 때 자동으로 객체를 json으로 변환한다. (반대의 경우도 그러하다) 하지만 fetch의 경우 따로 JSON.stringify 혹은 response.json을 사용해줘야 json 데이터를 주고받을 수 있다. 

 

3. Interceptor

axios는 interceptor라는 기능을 기본적으로 지원한다. interceptor는 axios 요청이 실행되기 전 어떠한 행동을 하는지 설정하는 것을 뜻하는데, 굉장히 유용한 기능 중에 하나다. 예를 들어 get요청을 실행하기 전에 해당 기록을 로그에 저장하고 싶다면 아래와 같이 코드를 작성할 수 있다. 

 

axios.interceptors.request.use(config => {
  // log a message before any HTTP request is sent
  console.log('Request was sent');

  return config;
});

// sent a GET request
axios.get('https://api.github.com/users/sideshowbarker')
  .then(response => {
    console.log(response.data);
  });

 

반면, fetch는 기본적으로 지원하지 않기 때문에 다소 복잡한 코드를 추가해야만 이용할 수 있는 기능이다.