如何通过 Promise.race 为高频 API 请求实现秒级的“自动超时裁决”与重试机制-js教程-PHP中文网

promise.race实现秒级超时需构造定时reject的promise与请求promise赛跑；失败后依超时、网络错误或服务端状态码智能重试，配合防抖、并发控制及abortcontroller避免资源浪费。

如何通过 promise.race 为高频 api 请求实现秒级的“自动超时裁决”与重试机制

用 Promise.race 实现秒级超时裁决 + 重试，核心在于让「请求 Promise」和「定时拒绝 Promise」赛跑，谁先完成谁胜出；失败后可基于结果类型（超时 or 网络错误）决定是否重试，而非盲目轮询。

关键不是单纯加 setTimeout，而是构造一个「在指定毫秒后自动 reject 的 Promise」，与 API 请求 Promise 一起传入 race：

超时 Promise 必须是 new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), ms))，不能用 resolve 后续再 throw —— race 只认状态变更瞬间
推荐封装为可复用函数，例如：
  const withTimeout = (promise, ms) =>
    Promise.race([
      promise,
      new Promise((_, reject) =>
        setTimeout(() => reject(new Error(`timeout ${ms}ms`)), ms)
      )
    ]);
调用时直接包裹 fetch：
withTimeout(fetch('/api/data'), 1000) —— 1 秒内没响应就报 timeout 错误

不能一遇到 reject 就重试。需判断是超时、网络中断，还是服务端明确返回 5xx/4xx —— 前两者适合重试，后者多数无意义：

在 catch 中检查 error.message 是否含 'timeout'，或用 error.name === 'AbortError'（配合 AbortController 时）识别前端主动中断
对 fetch，还需检查 !response.ok 和 response.status >= 500，这类服务端错误通常不建议重试
示例逻辑：
  async function fetchWithRetry(url, options = {}, retries = 2) {
    for (let i = 0; i       try {
        const res = await withTimeout(fetch(url, options), 1000);
        if (!res.ok && res.status >= 500) throw new Error(`Server error ${res.status}`);
        return res;
      } catch (err) {
        if (i === retries || !/timeout|network|failed to fetch/i.test(err.message)) {
          throw err;
        }
        // 等待 200ms 后重试，避免雪崩
        await new Promise(r => setTimeout(r, 200));
      }
    }
  }

仅靠超时+重试还不够。高频请求（如搜索联想、滚动加载）需叠加策略防止“请求风暴”：

很多实现看似能跑，但线上会静默失败：

fetch 不抛错：网络断开时 fetch 返回 rejected Promise，但 404/500 默认不会 reject，必须手动 if (!res.ok) throw …
race 不取消原请求：超时后 fetch 仍在后台运行，可能后续触发 then 导致重复处理 —— 应搭配 AbortController 主动中止
未清理定时器：若请求提前 resolve，超时定时器仍存在内存中 —— 用 AbortSignal.timeout()（现代浏览器）或封装时返回清理函数更稳妥
重试无限循环：忘记限制重试次数，或错误地把 429（限流）当超时重试，导致被服务器拉黑