Axios

HTTP 클라이언트 라이브러리로 비동기 방식으로 HTTP 데이터 요청을 진행한다.
비동기이기 때문에 이를 처리할 수 있는 async, await를 같이 쓴다.
axios는 내부적으로 XMLHttpRequest를 다루지 않고 AJAX 호출이 가능.

fetch와 axios 둘다 결국에는 서버와 통신하기 위해 사용하는 방법 중 하나일 뿐이다. 기능적으로는 동일하지만, 사용하는 방식이 다르다. 지난번엔 fetch를 사용해서, 이번에는 axios를 사용해봤는데 둘다 사용해보고 비교해보니 axios가 조금은 더 편한 것 같다.

fetch

fetch(API, {
      headers: {
        Authorization: sessionStorage.getItem("access_token"),
      },
    })
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          stateName: res.data;
        });
      });
  }

axios

axios.get(API, {
    headers: {
      "Content-Type": "application/json",
      Authorization: response.access_token,
    },
  })
  .then((res) => {
    this.setState({
      stateName: res.data.data;
    });
  });

위 두개는 각각 fetch와 axios를 통해 headers에 정보를 담아 서버에 보내주는 것이다.

• fetch는 들어오는 res를 그대로 사용하면 되지만, axios는 res.data로 사용해야 한다.
• fetch는 들어오는 값이 json형식이기 때문에 javascript형식으로 바꿔줘야 되지만, axios는 별도의 작업이 필요하지 않다.
• 대신 axios는 headers에 정보를 보낼 때, 'Content-Type'을 지정해줘야 한다.

axios의 장점

• 구형브라우저를 지원한다.(fetch의 경우는 폴리필 필요)
• request aborting에 대한 방법을 제공한다.
• 응답 시간 초과를 설정하는 방법이 있다.
• CSRF 보호 기능이 내장되어 있다.
• JSON 데이터 자동변환이 가능하다.
• node.js에서의 사용이 가능하다.
• catch 에 걸렸을 때, .then(~~~)을 실행하지 않고, console 창에 해당 에러로그를 보여준다.

fetch의 장점

• 라이브러리를 import 하지 않아도 사용할 수 있다.
• 라이브러리의 업데이트에 따른 에러 방지가 가능하다.