[axios] instance 그리고 interceptor

오늘은 국민 통신 라이브러리 axios를 뜯어보도록 하자.

🥱

Axios

axios란 서버와 통신하기 위한 HTTP 비동기 통신 라이브러리이다. api 요청에 대한 공부를 할 경우, 가장 처음 배우고 사용하는 라이브러리 일 것이다.

보통 처음 접하는 axios 요청은 다음과 같이 작성하는 것으로 알고 있다,

// get 요청
axios.get('/test')
// post 요청
axios.post('/test' {
    testString: 'test'
  })

참 쉽죠?

Axios instance

기본 axios에서 더 나가아 instance를 설정해 줄 수 있다.
axios instance를 이용하여 api 통신에 대한 구성 기본 값 설정을 더 쉽게 할 수 있다.

const instance = axios.create({
	baseURL: process.env.BASE_URL,
    timeout: 40000,
  	//...
})

//다음과 같이 기본값을 설정해줄 수도 있다.
instance.default.timeout = 4000;

또한, 이런 식으로 token값에 대한 기본 설정도 가능하다.
(해당 코드는 의미없는 예시용 코드이다...)

const token = localStorage.getItem("authorization");

if (token) {
	axiosInstance.defaults.headers.common.authorization = token;

그리고, 서버와의 cors origin 에러를 방지하기 위한 설정도 가능하다.

const instance = axios.create({
	withCredentials: true
})

아직까지도 쉽죠?

Axios interceptors

개인적으로 처음 접했을 때 당황했던 axios interceptors에 관하여 알아보자.

// 요청 인터셉터 추가하기
instance.interceptors.request.use(
  config => {
    // 요청이 전달되기 전에 작업 수행
    return config;
  }, 
  error => {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
});

// 응답 인터셉터 추가하기
instance.interceptors.response.use(
  response => {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  },
  error => {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
});

출처: https://axios-http.com/kr/docs/interceptors

사실 웬만한 api 통신은 이제 자신있다고 생각한 시점에 이 interceptors를 보고, "이건 또 무슨 코드인가..." (나는 누구인가) 를 거듭 떠올렸던 기억이 있었다.

참 어렵죠? 천천히 살펴보자.

Request instance

먼저 우리가 axios를 요청할 경우, 요청 인터셉터를 거치게 된다.
이 때 요청 인터셉터의 config의 타입을 훔쳐보면

많다. 다음과 같다.

요청 인터셉터를 거치면서 다음과 같은 값들을 console.log로 확인해 볼 수도 있고, 여러 로직을 구현할 수도 있을 것이다.

const { baseURL, url, method, params, data } = config;
console.log(params, data)

Response instance

다음은 응답 인터셉터이다. 응답 인터셉터의 response 타입을 훔쳐보면

그나마 볼만하다. 다음과 같다

응답 인터셉트도 마찬가지로 이전과 마찬가지로

• 사용 method
• url
• response.data

등을 확인할 수 있고 추가적으로 필요한 로직도 작성할 수 있다.
응답 인터셉터에서는 직접적으로 에러 핸들링을 진행할 수도 있을 것 같은데, 예를 들어

응답값이 403으로 오는 경우, 전역상태의 유저 token clear

등등 알뜰살뜰하게 구현해 주면 될 것이다.

마치며

이번 포스팅에서는 axios에 대하여 알아보았는데, 지금 와서 보면 크게 어려운 설명은 없었던 것 같다. 하지만 axios에 대해 익숙하지 않아, 어려움이 많았던 나와 같은 사람도 있을 거라 생각하여 간단하게나마 끄적끄적 해 보았다!

(안 하느니만 못하다는 생각이 안든다면 #성공적)