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

编码七号2025-04-25 9:45

功能背景：

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

方法：

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

步骤：

1.创建接口请求映射表

javascript 复制代码

let abortControllers = new Map()

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

javascript 复制代码

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

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

javascript 复制代码

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)
    }
)