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

V2EX = way to explore

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

现在注册

已注册用户请登录

› Vue.js

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

我尝试在 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 做吧