超详细的 axios 请求拦截封装 以及请求头添加参数

import axios from 'axios';
 
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里根据需要添加请求头，如token
    if (store.getters.token) {
      config.headers['Authorization'] = `Bearer ${store.getters.token}`;
    }
    return config;
  },
  error => {
    // 请求错误处理
    console.log('request error:', error);
    return Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    const res = response.data;
    // 根据返回的状态码做相应处理，例如401未授权等
    if (res.code !== 200) {
      // 可以根据错误状态码进行相应的处理
      console.log('response error:', res);
      // 这里可以自定义错误处理逻辑，比如重新登录等
    }
    return response;
  },
  error => {
    // 响应错误处理
    console.log('response error:', error);
    return Promise.reject(error);
  }
);
 
export default service;

这段代码展示了如何创建一个带有请求拦截器和响应拦截器的axios实例，并在请求头中添加了一个基于存储在Vuex store中的token的Authorization头。同时，它展示了如何处理可能发生的错误，例如，如果token不存在或者请求失败，如何进行错误处理。