axios拦截器之axios.interceptors.request.use和axios.interceptors.response.use

简单配置：

import axios from 'axios'
import {
  Message,
  Loading
} from 'element-ui'
const loadOption={fullscreen: true ,lock: true, text: '拼命加载中......', spinner: 'el-icon-loading', background: 'rgba(255, 255, 255, 0.5)'}

let loadingInstance=null;
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  if(config.loading){ // TODO： 是否开启全屏loading 默认开启
    loadingShow();
  }
  return config;
  }, function (error) {
  // 对请求错误做些什么
  if(loadingInstance!=null){ // TODO： 是否开启全屏loading 默认开启
    loadingClose();
  }
  return Promise.reject(error);
  });
  // 添加响应拦截器
  axios.interceptors.response.use(function (response) {
    if(response.config.loading!=null){ // TODO： 是否开启全屏loading 默认开启
      loadingClose();
    }
   
  return response;
  }, function (error) {
    if(loadingInstance!=null){ // TODO： 是否开启全屏loading 默认开启
      loadingClose();
    }
  return Promise.reject(error);
  });
  function loadingShow(){
    loadingInstance = Loading.service(loadOption);
}
function loadingClose(){
    loadingInstance.close();
}

---

第二种：

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);
  }
)

---

学习时间：

提示：这里可以添加计划学习的时间
例如：
1、 周一至周五晚上 7 点—晚上9点
2、 周六上午 9 点-上午 11 点
3、 周日下午 3 点-下午 6 点

---