用 Map 实现前端 API 请求竞态过滤，核心是按请求标识自动取消旧请求、只保留最新信号；Map 因键类型灵活、O(1) 查删、精准存在判断而优于对象和 Set，需合理构造 requestKey（如方法+URL+关键参数），并在请求前后注册/删除 AbortController。
用 Map 实现前端 API 请求的“竞态过滤”映射管理，核心是**按请求标识自动取消旧请求、只保留最新一次的有效信号**。这不是简单存取数据，而是构建一个轻量可控的请求生命周期协调器。
为什么选 Map 而不是普通对象或 Set
Map 天然支持键值对存储、键可为任意类型（比如 URL + 方法组合）、查找和删除时间复杂度为 O(1)，且能准确判断 key 是否存在——这对“发现并终止重复请求”至关重要。普通对象的键会被强制转为字符串，容易造成冲突；Set 只存值，无法关联控制器实例。
关键：定义唯一请求标识（Request Key）
标识必须能区分“逻辑上相同但参数不同”的请求。常见做法是拼接：HTTP 方法 + 基础 URL + 关键查询参数（如 search、page），而非完整 URL（避免 token、timestamp 等动态参数干扰）。例如：
GET_/api/users?search=react&page=1-
POST_/api/order（body 内容不参与 key 计算，需业务层自行判断是否可取消）
注意：不要把整个请求体 JSON 字符串作为 key，既低效又易因空格/顺序差异误判。
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
实现请求注册与自动取消逻辑
每次发起新请求前，先检查 Map 中是否存在同 key 的待处理请求。若有，立即调用其 abort()，再存入新的 AbortController 实例：
- 创建
new AbortController() - 生成 requestKey，查 Map；若存在，执行
existingController.abort() - 将新 controller 存入 Map：
pendingRequests.set(requestKey, controller) - 发起 fetch 或 axios 请求时传入
controller.signal - 请求完成（无论成功或失败）后，务必调用
pendingRequests.delete(requestKey)
配套建议：配合响应拦截统一清理
如果使用 axios，可在响应拦截器中自动移除已完成请求：
- 在请求 config 中注入 requestKey（如通过
config.meta = { requestKey }） - 响应拦截器里读取
config.meta.requestKey，执行requestManager.removeRequest(...) - 异常拦截器也做同样处理，防止 abort 异常漏删
这样业务代码完全无感，所有竞态控制收敛在请求管理层。
这套机制真正节省的是网络带宽和服务器压力，不只是前端 UI 层面的“忽略旧响应”。只要 Map 键设计合理、清理及时，就能稳定支撑搜索框、Tab 切换等高频场景。
