[리팩토링] Axios

axios추상화

프로젝트 기간에 api를 많이 사용해보면서 비동기 함수를 어떻게 사용하는 지에 대한 감은 잡았지만,
axios를 효율적으로 작성해서 사용하지는 못했었다. (중복 코드가 많았었음)
그래서 리팩토링 기간에 직접 axios코드를 수정했다.

• axios create함수를 사용해 모든 api에 필요한 공통 속성들을 정의한 커스텀 axios 생성
• 후에 리프레시 토큰 로직을 추가할 것을 대비한 interceptor 적용
• 메소드 이름과 각 메소드에 필요한 값들을 파라미터로 넘겨주면 해당 메소드의 커스텀 axios함수를 실행시켜주는 추상화 함수 생성

axios create함수를 사용해 모든 api에 필요한 공통 속성들을 정의한 커스텀 axios를 만들고,
후에 리프레시 토큰 로직을 추가할 것을 대비해 interceptor도 적용해주었다.

import axios from 'axios';

const { REACT_APP_API_END_POINT } = process.env;

const request = axios.create({
  baseURL: `${REACT_APP_API_END_POINT}`,
  timeout: 5000,
});

request.interceptors.request.use(
  config =>
    // 이 부분에서 리프레스 토큰 처리해주면 됩니다
    config,
  error => Promise.reject(error),
);

request.interceptors.response.use(
  response => response,
  error => Promise.reject(error),
);

export default request;

메소드 이름과 각 메소드에 필요한 값들을 파라미터로 넘겨주면 해당 메소드의 커스텀 axios함수를 실행시켜주는 추상화 함수도 만들었다.

const fetchWrap = async ({ method, url, data = {}, params = {} }) => {
  try {
    const config = {
      params,
    };

    const response =
      (method === 'get' && (await request.get(url, config))) ||
      (method === 'post' && (await request.post(url, data, config))) ||
      (method === 'put' && (await request.put(url, data, config))) ||
      (method === 'delete' && (await request.delete(url, config))) ||
      {};

    return response;
  } catch (error) {
    Swal.fire({
      title: error.response
        ? errorToString(error.response.data.code)
        : '요청 형식이 잘못되었습니다!',
      icon: 'question',
      confirmButtonText: '확인',
      confirmButtonColor: '#ffb15c',
    });

    return error;
  }
};

export const GET = ({ url, params }) =>
  fetchWrap({ method: 'get', url, params });

export const POST = ({ url, data, params }) =>
  fetchWrap({ method: 'post', url, data, params });

export const PUT = ({ url, data }) => fetchWrap({ method: 'put', url, data });

export const DELETE = ({ url }) => fetchWrap({ method: 'delete', url });

참고 자료

custom axios
axios interceptor