接口请求防抖

57 阅读1分钟

import axios from 'axios'

const debounce_Urls = ['/literacy-evaluate/api/v1/evaluation/submit'] // 需要防抖的接口路径

// 存储正在进行的请求 const pendingRequests = new Map() /**

  • 检查当前请求是否需要防抖处理 */ function shouldDebounce(url: string | undefined): boolean { if (!url) return false return debounce_Urls.some((debounceUrl) => url.endsWith(debounceUrl)) // 使用endsWith确保完整路径匹配 }

/**

  • 生成请求的唯一标识 */ function generateRequestKey(config: { url: string method?: string params?: any data?: any }) { const { method = 'post', url, params = {}, data = {} } = config // 提供默认值 // return [method, url, JSON.stringify(params), JSON.stringify(data)].join('&') return ${method.toUpperCase()}|${url}|${JSON.stringify(params)}|${JSON.stringify(data)} }

/**

  • 添加请求到缓存 */ function addPendingRequest(config: { url: string cancelToken?: any method?: string params?: any data?: any }) { // 只处理需要防抖的请求 console.log(config.url) console.log(debounce_Urls.includes(config.url)) console.log('0---0-0-0-0-0-0-0-') // if (!debounce_Urls.includes(config.url)) return config if (!shouldDebounce(config.url)) return config

const requestKey = generateRequestKey(config) console.log(requestKey) console.log('45---------------------------------------------------') console.log(pendingRequests) // 如果已有相同请求,取消新请求 if (pendingRequests.has(requestKey)) { const cancel = pendingRequests.get(requestKey) if (cancel) cancel(取消重复请求: ${requestKey}) pendingRequests.delete(requestKey) }

// 添加新请求 if (!config.cancelToken) { config.cancelToken = new axios.CancelToken((cancel) => { pendingRequests.set(requestKey, cancel) console.log('添加新请求到pendingRequests:', requestKey) }) } return config } /**

  • 移除请求缓存 */ function removePendingRequest(config: { url: string cancelToken?: any method?: string | undefined params?: any data?: any }) { // if (!debounce_Urls.includes(config.url)) return if (!shouldDebounce(config.url)) return

const requestKey = generateRequestKey(config) if (pendingRequests.has(requestKey)) { console.log('移除已完成请求:', requestKey) pendingRequests.delete(requestKey) } }

export { addPendingRequest, removePendingRequest }