axios接口取消

在项目中，我门经常碰见这样的场景，一个页面有一个tab切换标签，切换不同的标签的时候请求不同的接口，但是如果我们不做处理的话，可能会出现这样的情况，点击一次的时候，请求的接口很慢，然后我们又切换了tab，这时又请求了一个接口，这个接口很快，马上就返回数据了，最后的结果就是数据乱了，不是这个标签下的数据显示在了这个标签下。我之前都是通过判断接口是否请求完毕，加遮罩来防止这种情况的。最近搜索了一下取消请求，按照百度到的操作了一下，发现可行，记录一下。以后可以这么操作

一、首先在axios封装文件里加上如下图配置

代码如下

window._axiosPromiseArr = []

config.cancelToken = new axios.CancelToken(cancel => {
  window._axiosPromiseArr.push({ cancel })
})

二、在页面中取消请求接口

tabClick(type){
  window._axiosPromiseArr.forEach((ele,index) => {
     ele.cancel('提前终止请求接口') // 路由跳转之前，清空（终止）上一个页面正在请求的内容
     delete window._axiosPromiseArr[index] // 清空请求的参数 清空请求的参数
   })
   if(type == 1){
     this.findProduct();
   }else if(type == 2){
     this.getConfigProduct();
   }
 },

上面函数是tab切换触发的事件，在每次请求接口前，先把之前的接口全部取消掉

上面的切换，清空是清空的所有接口，如果要切换的时候取消某一个接口，可以在axios封装里面加一个字段属性，用来区分某一个接口，如下图

然后在在切换的时候可以根据url这个字段判断，是否时要取消的接口，如下图

这样取消的接口，就是只针对固定的接口，而不会把所有接口都取消