Axios拦截器-如何从vuex store返回响应

import axios from 'axios';
import store from '@/store';

// 创建Axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置请求的基础URL
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在请求发送之前可以在这里进行一些处理，如添加请求头等
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 在接收到响应数据之前可以在这里进行一些处理，如处理响应数据等
    // 将响应数据存储到Vuex store中的状态中
    store.commit('SET_RESPONSE_DATA', response.data);
    return response;
  },
  (error) => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

export default instance;

import axios from '@/axios';

axios.get('/api/data')
  .then((response) => {
    // 处理响应数据
    console.log(response.data);
  })
  .catch((error) => {
    // 处理请求错误
    console.error(error);
  });

// store.js
const store = new Vuex.Store({
  state: {
    responseData: null, // 存储响应数据的状态
  },
  mutations: {
    SET_RESPONSE_DATA(state, data) {
      state.responseData = data;
    },
  },
});