Skip to content

如何取消重复请求?

参考答案:

取消重复请求主要是为了避免无意义的网络消耗和数据覆盖问题。

常见的实现思路是 在发起请求前判断是否已经存在相同的请求,如果存在则进行取消或延迟处理

在具体实现上,通常会结合请求库的能力:

首先,使用 axios 这样的请求库时,可以通过其 CancelTokenAbortController 来管理请求。实现上通常在请求拦截器里,针对请求的 URL、请求方法、参数拼成一个唯一标识,将其存入一个 Map 中。如果新的请求在发起时检测到该标识已经存在,则取消掉上一次的请求,再更新为新的请求。这样就能保证同一个资源只会有一次有效请求。

其次,对于一些需要实时请求的场景(例如输入搜索框时的联想请求),也可以通过 防抖与节流 配合请求取消来降低重复请求的概率。比如用户快速输入时,只有最后一次输入才真正触发请求,中间的多余请求都会被主动取消。

此外,若在项目中使用 fetch,则可以通过 AbortController 原生支持取消请求。只要在请求发起时持有对应的 controller,下次发起同类请求时调用 controller.abort() 即可实现取消。

在设计层面,不同场景对“重复请求”的定义可能不同。比如数据列表的刷新按钮,如果用户连续点击两次,可能业务上只需保留最后一次;而对于支付、下单类请求,则需要在后端结合幂等性校验,前端的请求取消只能作为辅助措施。

题目要点:

  1. 通过请求拦截器维护一个请求 Map,利用 AbortControllerCancelToken 实现取消。
  2. 搜索、输入类场景可结合防抖、节流策略减少重复触发。
  3. 区分不同业务场景的重复请求处理策略,关键操作要依赖后端幂等性保证安全性。