axiosインタフェース

1662 ワード

Intercepterとは?
その後、要求または応答が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ラーニングガイド>Intercepter
https://xn--xy1bk56a.run/axios/guide/interceptors.html