💡 새로운 서비스를 개발하면서 개인적으로 정리한 내용들입니다. 글이 깔끔하지 않을 수 있습니다.

📔 이전글 보기: Axios 다양하게 활용하기: async/await사용

Axios 모듈에 공통 설정을 적용하여 사용하기

Axios에 기본설정 적용하기

// react를 기준으로 작성
import Axios from "axios";

const axiosInstance = Axios.create({
  timeout: 5000,
  headers: {
    "Content-Type": "application/json",
  },
});

// 아래와 같이 사용하면 기본으로 위의 timeout 및 header 설정이 되어있다.
axiosInstance.get("https://test.com/api/v1");

위와 같이 axiosInstance라는 객체를 만들어서 사용하게 되면 모든 axios 호출시에 timout 제한이 5초로 설정되고, headers에 application/json 설정이 들어가게 된다.

Axios에서 request와 response를 interceptor 하기

Axios는 위에서도 언급했듯이 http 통신을 위한 모듈료 RestAPI와 통신을 하는데 많이 사용된다. 문서를 보면 여러가지 사용법등이 있지만, 본인이 신규 프로젝트 진행시에 가장 덕을 보았던 부분은 request와 response를 interceptor 하는 부분이었다.

이름 그대로 request/response 이벤트를 interceptor 하는데, request 시에는 server로 요청보내기 바로전의 정보를 interceptor하며, response는 서버에서 요청받아온 데이터를 front로 return하기전에 interceptor가 가능하다. 자세한 내용은 아래 코드를 보자

// request를 interceptor 하기
axiosInstance.interceptors.request.use(
  config => {
    /** config에는 위의 axiosInstance 객체를 이용하여 request를 보냈을떄의 모든 설정값들이 들어있다.
     * [활용]
     * 1. api요청의 경우 token이 필요한 경우가 있는데, 필요에 따른 토큰 정보들을 여기서 처리할 경우
     * 토큰에 대한 정보를 여러곳에서 처리하지 않아도 된다.
     * 2. 요청 method에 따른 외부로 드러내지 않고 처리하고 싶은 부분에 대한 작업이 가능
     */
    return config;
  },
  err => {
    /** request 요청을 보낼때 error가 발생하는 경우 여기서 catch가 가능하다.
     */
    return Promise.reject(err);
  },
);

// response를 interceptor 하기
axiosInstance.interceptors.response.use(
  config => {
    /** 요청을 보낸 뒤에 response(응답)이 오는 경우에 여기서 먼저 확인이 가능하다.
     * [활용]
     * 1. status-code가 정상적이어도 내용상의 이유로 에러처리가 필요한 경우
     * 2. 민감정보 또는 데이터에 대한 가공 작업
     */
    return config;
  },
  ({ config, request, response, ...err }) => {
    /** response응답 후에 status-code가 4xx, 5xx 처럼 에러를 나타내는 경우 해당 루트를 수행한다.
     */
    const errMsg = 'Error Message';
    return Promise.reject({
      config,
      message: errMsg,
      response,
      ...err,
    });
  },
);

위의 방식을 사용하면 좀더 다양하게 활용이 가능하다.

Custom Axios 활용

위에서 작성한것처럼 custom axios 파일을 만들어서 실제 서비스에서 활용하자. 우선 필요에 따른 기능들이 구현된 별도의 파일을 아래처럼 만든다.

// axiosConfig.js
import React from 'react';

import Axios from 'axios';

const axiosInstance = Axios.create({
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

axiosInstance.interceptors.request.use(
  config => {
    return config;
  },
  err => {
    return Promise.reject(err);
  },
);

axiosInstance.interceptors.response.use(
  config => {
    return config;
  },
  err => {
    return Promise.reject(err);
  },
);

export default axiosInstance;

사용하려는 위치에서 해당 파일을 import 한뒤 기존엔 axios를 사용하듯이 이용한다

// App.js
import React from 'react';

import axiosInstance from 'axiosConfig' // 해당 import 위치는 axiosConfig.js 파일 위치에 따라 다르다/

...

axiosInstance.get('https://test.com/api/v1')

위와 같은 형태로 설정된 axios 코드를 import 하여 기존 axios 를 사용하듯이 사용하면 된다.