2) Axios 전역 설정

프론트(리액트)와 백엔드(스프링부트) 통신을 위해 Axios를 사용하는데, 추후 토큰 요청 및 인터셉터 등 공통적으로 사용하기 위해 Axios를 전역으로 설정합니다.

import axios from "axios";

const api = axios.create({
    // todo 추후 기술
});

// 요청 인터셉터
axios.interceptors.request.use(function (config) {
    // todo 추후 기술
    return config;
  }, function (error) {
    return Promise.reject(error);
  });


// 응답 인터셉터
axios.interceptors.response.use(function (response) {
    // todo 추후 기술
    return response;
  }, function (error) {
    
    return Promise.reject(error);
  });


export default api;

위와 같이 파일을 생성하면 아래와 같이 사용할 수 있습니다.

  // 기존 방식
  axios.get("....");

  // Axios 전역 설정
  api.get("....");

위와 같은 방법은 백엔드와 통신했을 때 공통으로 어떤 작업이 이루어져야 한다면 아주 편리하게 사용할 수 있을 뿐더러 요구사항이 변경된다면 수정도 용이합니다.