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

[jahnsli]

我尝试在 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);
    }
  }
}

[RabbitDR]

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

[version0]

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

[hamsterbase]

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]

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