Axios使用CancelToken取消重复请求

明知山

发布于 2023-08-18 08:25:11

2860

发布于 2023-08-18 08:25:11

文章被收录于专栏：前端开发随笔前端开发随笔

处理重复请求：没有响应完成的请求，再去请求一个相同的请求，会把之前的请求取消掉

新增一个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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-08-17，如有侵权请联系 cloudcommunity@tencent.com 删除

axios