axios 取消上一次的请求

需求

 在select change事件中，由于每次change都要去请求接口，但是这个接口返回的极慢，就会出现了，切换了多次，请求了很多次，

但是可能有的请求返回错误，有的有数据

接着，在接口请求超时或者是返回成功的时候，就会出现

页面上可能一直在弹出请求失败的消息，而下拉中缺有数据的尴尬请求

为了解决这种情况，我在axios中进行取消处理

引入axios

import axios from 'axios'；

 

//

const CancelToken = axios.CancelToken;

在全局先定义一个cancle变量
window.cancle=null;
....  //省略其他代码
res = await axios({
      url: `${process.env.apiBase}${url}`,
      method,
      data,
      params,
      timeout,
      //跨域请求是否需要凭证，默认false
      withCredentials,
      headers,
      responseType,
      cancelToken:new CancelToken(function executor(c) {  在axios封装的函数中写上这句就可以了
        window.cancle = c;
      })
   })
....省略其他代码

使用

handleSourChange(value){   //在切换select的操作中
        cancle();
        if(value){
          this.getTableListFn(value);
        }
          
   },

就可以了