AbortController 实现请求聚合的核心是智能取消：新请求发起时自动 abort 同 key 的旧请求。需定义唯一请求键（含 URL 与影响响应的参数）、用 Map 维护控制器映射、封装 fetchAggregated 函数统一管理生命周期，并处理防抖、多实例隔离等边界场景。
用 AbortController 实现请求聚合，核心不是“合并请求”，而是“智能取消”——当新请求发起时，自动 abort 上一个未完成的同类型请求，避免资源浪费和状态错乱。关键在于为每个请求标识（如 URL + 参数）维护唯一的 AbortController，并在新请求到来时触发旧控制器的 abort()。
一、定义请求唯一键（key）
聚合的前提是能准确识别“重复请求”。不能只比对 URL，需包含影响响应结果的所有参数（如 query、body、headers 中的关键字段）。推荐使用稳定序列化方式生成 key：
- GET 请求：对 sorted query 参数做
URLSearchParams字符串化，例如sort=age&limit=10→"limit=10&sort=age" - POST/PUT 请求：若需按 body 聚合，对 JSON.stringify 后的 body 做标准化（忽略空格、排序 key），但注意敏感字段（如 token）不应参与 key 计算
- 建议封装成工具函数
getRequestKey(method, url, options)，统一处理边界情况（如 undefined 参数、数组顺序）
二、维护控制器映射表（Map）
用 Map<string abortcontroller></string> 缓存每个 active key 对应的控制器。每次发请求前：
- 计算当前请求 key
- 若 map 中已存在该 key，调用旧控制器的
abort()（安全，多次调用无副作用） - 新建 AbortController，存入 map 并传给 fetch 的
signal选项 - 请求成功或失败后（包括 abort 导致的 reject），从 map 中
delete(key)
注意：务必在 finally 或 .catch 中清理 map，否则内存泄漏风险高。
三、封装可聚合的请求函数
不侵入业务代码，提供类似 fetchAggregated(url, options) 的封装：
- 内部管理 Map 实例（可单例，也可按业务域隔离）
- 支持配置是否启用聚合（如
options.aggregate = false用于调试） - 返回 Promise，并在 resolve/reject 后自动清理；同时暴露
abortByKey(key)供手动干预 - 示例片段：
const controller = new AbortController();<br>abortMap.set(key, controller);<br>return fetch(url, { ...options, signal: controller.signal })<br> .then(res => { abortMap.delete(key); return res; })<br> .catch(err => { abortMap.delete(key); throw err; });
四、处理竞态与边界场景
真实场景中需防御性设计：
-
防抖型聚合：对高频输入（如搜索框），可加
debounceMs参数，在 key 相同且间隔短时延迟新请求，而非立即 abort —— 这属于上层策略，可在聚合层外组合使用 - 多实例隔离：不同组件/模块应使用独立 Map，避免跨业务误 cancel；可用 WeakMap 关联组件实例生命周期
- 服务端幂等不等于前端可聚合：即使接口幂等（如 PUT），前端仍需聚合防止 UI 多次 setState 或 loading 状态混乱
- 错误响应不自动重试：AbortController 只解决“取消”，不处理失败重试逻辑；重试需单独封装，且重试时应生成新 key（如加入 retryCount）
