axios请求拦截器

axios请求拦截器（避免重复请求）

通过node安装axios：npm install axios --save
axios请求拦截器可以统一对错误码进行处理，避免重复请求

• axios支持并发请求

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

• 拦截器

import axios from 'axios';
import { message } from 'antd';

let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
let cancelToken = axios.CancelToken;
let removePending = ever => {
  for (let p in pending) {
    if (pending[p].u === ever.url + '&' + ever.method) {
      //当当前请求在数组中存在时执行函数体
      pending[p].f(); //执行取消操作
      pending.splice(p, 1); //把这条记录从数组中移除
    }
  }
};

const Axios = axios.create({
  // baseURL: "/",
  timeout: 10000,
  responseType: 'json',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
  },
});
//POST传参序列化(添加请求拦截器)
Axios.interceptors.request.use(
  config => {
    removePending(config); //在一个ajax发送前执行一下取消操作
    config.cancelToken = new cancelToken(c => {
      // 这里的ajax标识我是用请求地址&请求方式拼接的字符串，当然你可以选择其他的一些方式
      pending.push({ u: config.url + '&' + config.method, f: c });
    });
    return config;
  },
  error => {
    console.log(error);
    return Promise.reject(error);
  }
);

//返回状态判断(添加响应拦截器)
Axios.interceptors.response.use(
  res => {
    removePending(res.config);
    //对响应数据做些事
    if (res.data.code != "000") {
      // 用户登录的时候会拿到一个基础信息,比如用户名,token,过期时间戳
      // if (!localStorage.getItem("token")) {
      //   window.location.href = "/member/login";
      // }
      switch (res.data.code) {
        // 根据不同的错误码，任意选择干点啥

        case "-1":
          //服务繁忙
          break;
        case "001":
          //取消订单失败
          message.error("取消订单失败！");
          return false;
        case "20050":
          //电子卡激活-无权限
          message.error("抱歉，您无激活权限！");
          break;
        //对服务端返回的错误代码进行修饰
        default:
          message.error(res.data.message);
          return false;
      }
      console.log("Axios.interceptors.response --> " + res.data.message);
    } else {
      return res.data.data;
    }
  },
  error => {
    // 返回 response 里的错误信息
    if (axios.isCancel(error)) {
      message.error('请勿重复请求');
    } else {
      // error.response-----可以获取错误信息
    }
    return Promise.reject(error);
  }
);
-------React-----------
export default Axios;
-------React-----------

-------Vue-------------
// 对axios的实例重新封装成一个plugin ,方便 Vue.use(xxxx)
export default {
  install: function(Vue) {
    Object.defineProperty(Vue.prototype, "$http", {
      value: Axios
    });
  },
  axios: Axios
};
-------Vue-------------