● axios 인스턴스와 인터셉터에 대해 알아보기

메인 프로젝트 리팩토링을 하면서 axios 인터셉터에 대해 접하게 되었는데, 저는 아직 axios 인스턴스에 대해서도 잘 모르는 것 같아 인스터와 함께.. 나아가 인터셉터도 알아볼까합니다.

 

● 🥹 Axios 인스턴스가 뭔데..?

일반적으로 쓰는 axios에서 더 나아가 instance를 설정해줄 수 있습니다. 즉, 기본 값을 설정해줄 수 있는게 인스턴스라고 생각하면 됩니다.

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

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

axios 공식문서는 위와 같이 예시를 적어주었는데요, axios.create 를 사용해서 axios인스턴스를 만들어 기본값들을 설정해줄 수 있습니다. 

 

● 🥹 Axios 인스턴스.. 왜 사용하는건데..?

메소드 요청시마다 header에 로그인 토큰을 보내야 한다면 ? 인스턴스 없이 작성한다고 가정하면, 각 axios 메소드의 config마다 중복되는 내용 (ex - headers: { ’token’: ‘foo’ }) 을 적어줘야 합니다. 함수마다 같은 내용을 적어줘야 하는데요. 복잡한 어플리케이션 속 함수가 수십 수백개라고 상상해보세요.

더 큰 문제는 유지보수때문입니다. config의 들어갈 내용이 일부 바뀐다면.. 모든 axios 메소드가 사용되는 곳에 수정을 해야합니다.ㅠ_ㅠ 따라서 axios 인스턴스를 사용하는 것입니다.

• 짧은 코드
• 유지보수

 

● 🧐 Axios 인스턴스 사용예시

import axios from 'axios'

const BASE_URL = '주소~'

// 단순 get요청으로 인증값이 필요없는 경우
const axiosApi = (url, options) => {
  const instance = axios.create({ baseURL: url, ...options })
  return instance
}

// post, delete등 api요청 시 인증값이 필요한 경우
const axiosAuthApi = (url, options) => {
  const token = '토큰 값'
  const instance = axios.create({
    baseURL: url,
    headers: { Authorization: 'Bearer ' + token },
    ...options,
  })
  return instance
}

export const defaultInstance = axiosApi(BASE_URL)
export const authInstance = axiosAuthApi(BASE_URL)

위와 같이 인스턴스를 만든 후,

import { defaultInstance, authInstance } from '@apis/utils'

// 인증이 필요없는 데이터 요청
export const getPost = async (data) => {
  try {
    const { data } = await defaultInstance.get(
      `posts/channel/${data}`,
    )
    return data
  } catch (error) {
    console.log(error)
  }
}
// 인증이 필요한 데이터 요청
export const postCreate = async (data) => {
  try {
    await authInstance.post('posts/create', data)
  } catch (error) {
    console.log(error)
  }
}

 

● 🥹 그래서 Axios 인터셉터가 뭔데..?

axios 인터셉터란 쉽게 이야기하자면 약간의 미들웨어 성격을 띠고 있습니다. axios요청의 결과를 return 하기전에 어떠한 작업을 하는 것과 같습니다.

실제 공식문서에서도 "then또는catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다." 라고 이야기 하고 있습니다.

아래는 공식문서에 올려진 예시입니다.

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

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

 

● 🥹 그래서 Axios 인터셉터 왜쓰느데..? 언제쓰느데..?

• 모든 Request에 auth token header를 주입

Axios 인터셉터를 사용하면 이것을 한 번에 설정할 수 있으며, Axios 인스턴스를 호출하는 모든 곳에서 토큰을 지니고 있음을 확신할 수 있습니다.

// api/userApis.js

const access_token = getCookie("access_token");
const refresh_token = getCookie("refresh_token");
// api/userApis.js

api.interceptors.request.use(function (config) {
  config.headers.common["Authorization"] = access_token;
  config.headers.common["Refresh-Token"] = refresh_token;
  return config;
});

위의 예시를 보고 나니.. 메인 프로젝트 리팩토링때 적용했으면 좋았을걸.. 이런생각이 드네요 🥲

• 모든 Request와 Response에 Log를 삽입

로그는 유용합니다. Axios 인터셉터를 사용하면 모든 요청과 응답을 빠르게 기록할 수 있습니다.

const axios = require(‘axios’);

axios.interceptors.request.use(req => {
  // 로그 남기기
  console.log(`${JSON.stringify(req, null, 10000000)}`);
  return req;
});

axios.interceptors.response.use(res => {
  // 로그 남기기
  console.log(res.data.json);
  return res;
});

await axios.post(‘https://example.com/‘);

 

 

axios 인스턴스 사용법

[axios] instance 그리고 interceptor

Axios 인스턴스 | Axios Docs