【axios取消请求】如何在token过期后取消未响应的请求

功能背景：

我们在实际项目中通常会遇到登录过期后会跳登录页的情况，回跳过程会根据接口请求的状态码判断是否登陆状态过期，并给出用户提示，如果此时存在多个请求接口同时调用，就会同时报出多个登录过期的提示，如何避免多个提示同时报出的情况呢？那我们就需要用到取消接口请求的功能

方法：

我们基于axios提供的AbortController对象（fetch提供的原生API)来实现这一功能

步骤：

1.创建接口请求映射表

let abortControllers = new Map()

2.在请求拦截器中存储键值对

Axios.interceptors.request.use((config) => {const controller = new AbortController()const signal = controller.signalconst requestKey = `${config.url}`// 请求地址与控制器绑定abortControllers.set(requestKey, controller)config.metadata = { signal, requestKey } // 自定义字段用于存储return config},(error) => {return Promise.reject(error.data.error.message)}
)

3.响应拦截其中判断是否过期

Axios.interceptors.response.use((res) => {if (res.status === 200) {if (res.data.code == '10008') {ElMessage.warning('登录已过期，请重新登录！')// 取消所有还未执行的接口请求abortControllers.forEach((controller) => controller.abort())abortControllers.clear() // 清空控制器映射router.push('/login')return} else {// 完成的接口在映射表中删除const requestKey = `${res.config.url}`abortControllers.delete(requestKey)return res.data}}},(error) => {// 出错的接口在映射表中删除const requestKey = `${error.config.url}`abortControllers.delete(requestKey)return Promise.reject(error.response.status)}
)