【vue3基础】axios请求的取消方法

项目中多次调用一个请求方法，但是获取到的最终数据有可能并不是最后一个，而是最后返回的一个数据，所以解决方法是在最新的一个请求之前，取消所有没有返回数据的接口。

1. 取消请求方法

在 request.js 中请求封装里面添加如下代码，request.js 封装请看之前的 文章 。

// 创建一个 Map 来存储取消令牌
const cancelTokenMap = new Map();
// 创建一个需要取消接口请求的列表，防止取消其它的接口
const apiList = [接口路径]

// 请求拦截器
service.interceptors.request.use(config => {
  ... 以上内容省略
  
let url = config.url.split('?') // 去掉接口上的参数
if (apiList.indexOf(url[0]) !== -1) {
  const key = `${config.method}-${config.url.split('?')[0]}` // 定义一个key，标记接口
  
  if (cancelTokenMap.has(key)) {
    // 如果有请求，就取消
    cancelTokenMap.get(key).cancel('cancel');
  }
  
  // 如果没有就创建取消令牌
  const cancelToken = axios.CancelToken.source();
  cancelTokenMap.set(key, cancelToken);
  config.cancelToken = cancelToken.token;
}
  
  
  return config
}),error => {
  return Promise.reject(error)
}

判断条件还应该根据实际的接口请求去判断，我只是简单的写了一个方法。