[JavaScript] axios

fetch 함수는 Ajax 통신을 하는 함수이다. 그런데 오늘날 개발 실무에서는 이 fetch 함수 말고도 Ajax 통신을 할 수 있는 방법이 존재하는데, 그것은 바로 axios 라고 하는 외부 패키지를 사용하는 것이다.

 

axios 패키지를 사용한 코드를 보면,

axios
  .get('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

이 코드는 axios 패키지에서 제공하는 axios 객체를 사용해서 GET 리퀘스트를 보내고 그 리스폰스를 받는 코드이다.

자세히 보면 지금 코드에서 axios.get이라고 쓰여 있는 부분만 fetch로 바꾸면 fetch 함수와 사용법이 비슷해 보이는데, 

사실 axios 객체에서 리퀘스트를 보내는 많은 메소드들이 fetch 함수처럼 Promise 객체를 리턴함. 그래서 fetch 함수의 사용법과 비슷한 점이 많음.

 

axios 객체에는 fetch 함수에는 없는 다음과 같은 몇 가지 기능 및 장점들이 있음.

 

• 모든 리퀘스트, 리스폰스에 대한 공통 설정 및 공통된 전처리 함수 삽입 가능
• serialization, deserialization을 자동으로 수행
• 특정 리퀘스트에 대해 얼마나 오랫동안 리스폰스가 오지 않으면 리퀘스트를 취소할지 설정 가능(request timeout)
• 업로드 시 진행 상태 정보를 얻을 수 있음
• 리퀘스트 취소 기능 지원

axios가 이렇게 fetch에 비해 다양한 기능을 지원하는 것은 맞지만 단점도 있음.

바로 별도의 다운로드가 필요한 패키지이며, fetch 함수는 웹 브라우저에서 바로 지원되는 함수이기 때문에 별도로 패키지를 다운로드받지 않아도 되지만, axios는 별도로 패키지를 다운로드해줘야 한다.

그래서 axios에서 제공하는 추가 기능이 필요한 경우에는 axios를 쓰고, 그런 기능이 필요하지 않고 별도의 패키지 다운로드를 원하지 않는 경우에는 fetch 함수를 사용한다.

실무에서는 fetch 이외에 axios도 많이 쓰며, axios 또한 리퀘스트를 보내는 주요 메소드들이 Promise 객체를 리턴함.