Axios使用CancelToken取消重复请求

最新推荐文章于 2025-04-03 10:25:17 发布

明知山_

最新推荐文章于 2025-04-03 10:25:17 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Module 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/AK852369/article/details/132332775

Module 专栏收录该内容

27 篇文章

订阅专栏

处理重复请求：没有响应完成的请求，再去请求一个相同的请求，会把之前的请求取消掉
在这里插入图片描述
新增一个cancelRequest.js文件

import axios from "axios"
const cancelTokens = {}

export const addPending = (config) => {
    const requestKey = getRequestKey(config)
    if (cancelTokens[requestKey]) {
        cancelTokens[requestKey].cancel('cancel request')
    }
    const source = axios.CancelToken.source()
    cancelTokens[requestKey] = source
    config.cancelToken = source.token
}

export const deletePending = (res) => {
    const requestKey = getRequestKey(res.config)
    if (cancelTokens[requestKey]) {
        delete cancelTokens[requestKey]
    }
}

const getRequestKey = (config = {}) => {
    return config.url + config.method + JSON.stringify(config.params, config.data)
}

request.js

import axios from "axios"
import { baseUrl } from "@/config"
import { addPending, deletePending } from "./cancelRequest"
const service = axios.create({
    baseURL: baseUrl,
    timeout: 100000,
})
service.interceptors.request.use(
    config => {
        addPending(config)
        return config
    },
    error => {
        return Promise.error(error)
    }
)

service.interceptors.response.use(
    success => {
        deletePending(success)
    },
    error => {
        deletePending(error)
    }
)

export default service