取消重复的 axios 请求时如何避免失败？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1067 天前的主题，中的信息可能已经有所发展或是发生改变。

我尝试在 Axios 中取消重复请求，但它可能仍会发送重复请求。

import type { AxiosRequestConfig } from 'axios'; export default class CancelRequest { pendingRequestList: Map<any, any>; constructor() { this.pendingRequestList = new Map(); } addPendingRequest = (config: AxiosRequestConfig) => { const { method, url, params, data } = config; const cOntroller= new AbortController(); config.signal = controller.signal; const uniqueKey = [method, url, JSON.stringify(params), JSON.stringify(data)].join('&'); this.pendingRequestList.set(uniqueKey, controller); }; removePendingRequest(config: AxiosRequestConfig) { const { method, url, params, data } = config; const uniqueKey = [method, url, JSON.stringify(params), JSON.stringify(data)].join('&'); if (this.pendingRequestList.has(uniqueKey)) { this.pendingRequestList.get(uniqueKey).abort(); this.pendingRequestList.delete(uniqueKey); } } }

4 条回复 2022-11-09 10:40:23 +08:00

RabbitDR

2022-11-08 23:19:42 +08:00

思路可能不太对，不应该基于 axios 去做这个工作。应该再加一层缓存，然后在缓存层去决定要不要发出一个 axios ，而不是去取消一个 axios ，这样无论你换什么请求工具都可以去重。具体可以参考 swr 的实现

version0

2022-11-08 23:42:22 +08:00

我理解的 axios 的取消请求功能并不是真的取消了这次请求，因为发出去的请求是取消不了的，只是取消的请求没有 promise 回调而已

hamsterbase

2022-11-09 01:22:15 +08:00 via iPhone

Function request(url)

If(this.map.has(url
Return this.map.url
Else
This.map.set(url, this.dorequest(url)
)

function dorequest(url
// const res = await axios.get(url)
This.map.delete(url)
Return res

手机打的伪代码。核心是 request 和 dorequest 分离。
在 request 实现缓存逻辑。

wangerka

2022-11-09 10:40:23 +08:00

就楼上的缓存层，用 rxjs 的 switchMap 做吧