axios

 

Axios란?

axios는 JavaScript용 HTTP 클라이언트 라이브러리이다.

Node.js와 웹 브라우저 환경에서 사용할 수 있으며, HTTP 요청과 응답을 쉽게 처리할 수 있다.

 

주요 특징은 아래와 같다.

• Promise 기반으로 비동기 통신을 쉽게 처리할 수 있다.
• JSON 데이터에 대한 자동 변환 기능을 제공한다. 
• 요청/응답 인터셉터를 사용해 HTTP 요청 및 응답 전/후에 작업을 수행할 수 있다.

 

Axios를 사용하게 된 계기

이번 프롤로그 근로에서 fetch를 axios로 바꾸는 일을 맡게 되었다.

통신하는 부분이 fetch와 axios로 혼합되어 있었고 통일하자는 의견이 나왔다.

axios가 JSON 데이터를 자동으로 변환해 준다는 것을 알게 됐고 이를 사용해 보기로 했다.

 

 

Axios와 fetch의 차이

그럼 fetch와 axios의 차이점은 무엇일까?

 

• fetch는 내장 라이브러리로 따로 import 하지 않아도 되지만, axios는 설치해야 한다.
• fetch는 JSON 변환을 해줘야 하지만 axios는 JSON 데이터로 자동 변환해 준다.
•  fetch는 HTTP 에러 응답을 받아도 네트워크 장애가 발생한 경우에만 거부하지만, axios는 상태 코드가 200 범위를 넘어가면 거부한다.

 

Fetch -> Axios 경험기

1. JSON 변환 부분 수정

fetch는 JSON으로 변환해야 했지만, axios의 경우 자동으로 JSON으로 변환해 주기에 

기존 코드에서도 데이터를 받는 부분을 수정할 필요가 있었다.

 

따라서 아래 코드를

      const res = await loginRequest({ code });

      return await res.json();
    },

 

다음과 같이 수정했다.

      const response = await loginRequest({ code });

      return await response.data;

 

2. reponse.ok

fetch의 경우 reponse.ok로 요청이 정상적으로 처리되었는지 확인할 수 있었다.

하지만, axios의 경우 이 방법을 사용할 수 없었고 상태 코드 자체로 확인할 수 있었다.

 

이 코드를

if (!response.ok) {
  throw new Error(await response.text());
}

 

이렇게 바꾸었다.

if (response.status >= 400) {
  throw new Error(response.statusText);
}

 

추후에는 try... catch문 안에 넣어서 상태 이상이 발생했을 때 바로 catch단에서 에러를 출력할 수 있도록 수정하였다.

 

3. Axios Instance

axios를 custom 하여 사용할 수 있다.

프롤로그에서는 headers와 baseURL이 각 함수마다 반복하고 있어 이 부분을 custom 하기로 했다.

 

밑의 예시와 같이 axios.create를 사용해 반복되는 부분을 custom 할 수 있다.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

 

Axios 사용 후기

이번에 axios를 처음 사용해 보았는데 생각보다 장점이 많은 라이브러리라고 생각한다.

특히 JSON으로 자동 변환 시켜주는 부분은 번거로움을 많이 해소시켜 주었고,

axios.instance는 따로 util로 빼줌으로써 코드가 훨씬 깔끔해졌다.

axios 동시 요청이나 formdata 보내는 것 등 다양한 axios 응용법이 있었는데 더 공부해 보도록 해야겠다.