[JS] Axios를 알아보자!

react로 프로그램을 개발하면서 Ajax 통신을 위해서
fetch를 사용하기도 하지만 axios를 더 선호하게 된다.
fetch를 사용하게 될 경우에 다음과 같이 response 데이터를 처리해 주어야 한다.

// fetch의 defaults method는 get
fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.json())
  .then((result) => {
    console.log(result); 
  })
  .catch((error) => {
    console.log(error)
  });

반면에 axios는 deserialization을 자동으로 수행해주기 때문에
다음과 같의 간결한 코드를 작성할 수 있다.

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

이외에도 axios 사용의 장점은 많다.

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