axios 인터셉터

인터셉터란?

then이나 catch로 처리되기 전에 요청이나 응답을 가로채는 것입니다.

src/api/index.js

import axios from "axios";
import { setInterceptors } from "./common/interceptors";

function createInstance() {
  const instance = axios.create({
    baseURL: process.env.VUE_APP_API_URL,
  });

  return setInterceptors(instance);
}
const instance = createInstance();

function registerUser(userData) {
  return instance.post("signup", userData);
}

function loginUser(userData) {
  return instance.post("login", userData);
}

export { registerUser, loginUser };

src/api/common/interceptors.js

import store from "@/store/index";

export function setInterceptors(instance) {
  // 요청 인터셉터 추가 
  instance.interceptors.request.use(
    function(config) {
      // 요청 보내기 전에 수행할 일 
      config.headers.Authorization = store.state.token;
      return config;
    },
    function(error) {
      // 오류 요청을 보내기 전 수행할 일 
      return Promise.reject(error);
    }
  );

  // 응답 인터셉터 추가 
  instance.interceptors.response.use(
    function(response) {
      // 응답 데이터 가공 
      return response;
    },
    function(error) {
      // 오류 응답 처리 
      return Promise.reject(error);
    }
  );

  return instance;
}

setInterceptor

참고
https://github.com/axios/axios
Axios 러닝 가이드 > 인터셉터
https://xn--xy1bk56a.run/axios/guide/interceptors.html