AbortController 实现请求去重与熔断的前端网关方案

本文深入探讨了如何基于原生 AbortController 构建一个兼具请求去重与智能熔断能力的前端网关方案——通过设计稳定可比对的请求指纹（GET 标准化 query + method + pathname，POST/PUT 浅标准化 body）、利用 Map 缓存待决请求实现精准去重，并结合滑动时间窗口统计失败率、指数退避与半开恢复机制实现鲁棒熔断；同时强调错误分类（区分网络异常与业务错误）、状态全局共享、信号穿透拦截器链等关键实践，直击前端高并发场景下资源浪费、雪崩风险与调试盲区等真实痛点，为构建生产级前端请求治理层提供了可落地的技术范式。

AbortController 本身不支持去重和熔断，得自己封装

AbortController 只负责中断请求，它既不会记住你发过什么请求，也不会统计失败次数。想实现去重和熔断，必须在它外面包一层逻辑层——比如用 Map 缓存 pending 请求，用计数器 + 时间窗口做熔断判断。直接往 fetch 或 axios 里塞一个 AbortController 实例，什么都解决不了。

请求去重的关键是「请求指纹」生成要稳定且可比对

不能简单用 URL 做 key：带时间戳、随机参数或 token 的请求每次都不一样，但业务上可能是同一个资源；也不能只比对 method + url，漏掉 body 或 query 参数会导致误去重。推荐做法是：

• GET 请求用 URLSearchParams 标准化 query，再拼接 method + pathname
• POST/PUT 等带 body 的请求，对 JSON.stringify(body) 做浅标准化（比如排序 key、忽略 undefined）后参与哈希
• 把最终指纹存在 Map 里，value 存的是 { controller: AbortController, resolve, reject } 集合
• 新请求来时先查指纹，命中就复用已有 promise，不发新请求

熔断必须区分「瞬时失败」和「持续异常」，靠滑动时间窗口计数

只看最近 10 次失败就开熔断？太敏感；等 100 次才响应？又太迟钝。更合理的是按时间窗口统计，比如「过去 60 秒内失败 ≥ 5 次，且成功率

• 熔断状态要全局共享，不能每个请求都独立维护计数器
• 恢复策略别用固定等待时间，建议指数退避 + 半开模式：熔断后首次试探请求放行，成功则关闭熔断，失败则重置计时
• AbortController.abort() 不会自动清除关联的计数，得在 catch 里显式调用失败计数函数
• 别把网络超时和业务错误混为一谈——401、403 这类应归入「非熔断错误」，否则登录态失效也会拖垮整个网关

与 axios 或 fetch 集成时，abort 和熔断信号必须能穿透中间件链

如果你用 axios，CancelToken 已废弃，必须用 signal 字段传入 AbortSignal；而熔断判断得放在拦截器最外层，否则请求根本到不了发送阶段。示例关键片段：

const gateway = (config) => {
  const fingerprint = generateFingerprint(config);
  if (circuitBreaker.isOpened()) {
    return Promise.reject(new Error('CIRCUIT_OPENED'));
  }
  if (pendingMap.has(fingerprint)) {
    return pendingMap.get(fingerprint).promise;
  }
  const controller = new AbortController();
  const promise = fetch(config.url, { ...config, signal: controller.signal })
    .then(res => res.json())
    .catch(err => {
      if (err.name === 'AbortError') return;
      circuitBreaker.recordFailure();
      throw err;
    });
  pendingMap.set(fingerprint, { controller, promise });
  return promise;
};

真正难的不是写几行 AbortController，而是让去重键不漏、熔断阈值不飘、错误分类不串。这些边界条件在压测时才会暴露，上线前最好用 mock failure 注入跑一遍。

终于介绍完啦！小伙伴们，这篇关于《AbortController 实现请求去重与熔断的前端网关方案》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！