vue项目的axios请求配置interceptors.js

import axios from 'axios'
import store from '@/store'
import router from '@/router'
import {
  Message,
  Loading
} from 'element-ui'

const errorCode = {
  '401': '请重新登录',
  '403': '对不起，您没有权限访问',
  '500': '系统异常，无法处理，请退出重试',
  '1001': '参数不完整，无法处理，请退出重试'
}

// ---------------- loading配置--------------------------

let loadingInstance = null;
let loadingJump = null;

// 请求数量
let requestIndex = 0;
// 多个请求没结束，只开启一个loading
const loadingShow = () => {
  if (requestIndex === 0) {
    loadingInstance = Loading.service({
      text: '请稍等',
      // target: document.querySelector('.el-tabs__content')
    });
  }
  requestIndex++;
}
// 等最后一个请求结束，再关闭loading
const loadingHide = () => {
  requestIndex = requestIndex <= 0 ? 1 : requestIndex;
  requestIndex--;
  if (requestIndex === 0) {
    loadingInstance.close();
  }
}

// ---------------- message配置--------------------------

let errorFlag = true; // 一个message.error期间只能出现一个
let errorDuration = 3000; // 默认3000ms
let warningFlag = true; // 一个message.warning期间只能出现一个
let warningDuration = 3000; // 默认3000ms

// ---------------- axios配置--------------------------

axios.interceptors.request.use(
  
  config => {
    // 每次发送请求之前判断vuex中是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    if(config.loading){ // TODO： 是否开启全屏loading 默认开启
      loadingShow();
    }
    const token = store.state.token;
    token && (config.headers.Authorization = token);
    return config;
  },
  error => {
    if(loadingInstance!=null){
      loadingHide();
    }
    return Promise.reject(error);
  }
)

axios.interceptors.response.use(
  res => {
    if(res.config.loading){
      loadingHide();
    }
    try {
      let code = res.data.errorCode;
      let desc = res.data.desc;
      if (code == 0) {
        return res;
      } else if (errorCode.hasOwnProperty(code)) {
        if (errorFlag) {
          Message.error(desc);
          errorFlag = false;
          setTimeout(() => {
            errorFlag = true
          }, errorDuration)
        }
        if (code === 401 || code === '401') {
          loadingJump = Loading.service({
            text: '正在跳转'
          });
          setTimeout(function () {
            router.replace({
              path: '/'
            });
            sessionStorage.removeItem('TOKEN');
            store.commit('setToken', '');
            loadingJump.close();
          }, 2000);
        }
      } else if (code === 2 || code === '2') {
        if (warningFlag) {
          Message.warning(desc);
          warningFlag = false;
          setTimeout(() => {
            warningFlag = true
          }, warningDuration)
        }
      } else {
        if (errorFlag) {
          Message.error(desc);
          errorFlag = false;
          setTimeout(() => {
            errorFlag = true
          }, errorDuration)
        }
      }
      return res
    } catch (e) {
      return res
    }
  },
  error => {
    if(loadingInstance!=null){
      loadingHide();
    }
    return Promise.reject(error);
  }
)

 main.js引入

import './request/interceptors'