axios中断网络请求操作。

背景

例如：在实际开发中，有可能遇到这种情况就是：某些请求会根据参数的变化而重新发新的请求。就会遇到如果第一次请求的数据量大，而第二次请求的数据量小。那么第二个接口会先fullfilled,第一个接口有可能还在pending状态。所以当第一个接口请求完数据回来就会把我们实际需要的数据（第二次请求的数据，也就是最新的数据）进行覆盖掉会产生一些麻烦。因为我们需要的是最新请求的数据，而不是之前的数据。

思路

首先想到的是在请求数据之前清除所有的正在pending的网络请求
在网上查找到了一个比较好一点的解决方案；在这里记录一下：
首先附上axios官网的例子：axios官网例子
1.首先创建一个pending数组用于存储中断函数和请求标识
2.然后在axios的请求拦截器里对请求进行拦截，并把标识push进pending数组中

let request = axios.create();
const CancelToken = axios.CancelToken;

// 1.存储中断函数和请求标识
let pending = []; //声明一个数组用于存储每个ajax请求

//2.在请求拦截器中进行push 数据收集
request.interceptors.request.use(config => {
  removePending(config);
  config.cancelToken = new CancelToken(c => {
    pending.push({ cancel: c, url: config.url + '&' + config.method });
  });
  return Promise.resolve(config);
});

3.对请求进行中断处理
在这里还有一些问题，因为如果是get请求的话之后的请求不会中断前面的那个相同接口的get请求，除非参数一致才会中断。

const removePending = config => {
  for (let p in pending) {
    if (pending[p].url === config.url + '&' + config.method) {
      pending[p].cancel('request canceled'); // 只有pending状态时才会执行取消请求操作，因为其他状态时已经请求完成了，没必要进行中断请求了。
      pending.splice(p, 1);
    }
  }
};

4.然后在相应拦截器里进行清除数据

const responseInterceptResolve = response => {
  removePending(response.config); //对已经fullfilled的请求从pending中清除
  return Promise.resolve(response.data).catch(err => {
    console.error(err);
  });
};
request.interceptors.response.use(responseInterceptResolve, error => {});

注意

这里只对post请求进行了中断处理，如果是get请求的话，大致思路是对请求的url进行截取处理然后判断。