JavaScript中Promise-race竞争机制在超时控制应用-js教程-PHP中文网

promise.race 是实现超时控制最简洁有效的方式，通过让业务请求 promise 与定时 reject 的 promise 赛跑，首个 settled 的结果决定最终状态；需确保超时 promise 使用 reject、每次新建 timer、配合 abortcontroller 真正中止请求。

javascript中promise-race竞争机制在超时控制应用

Promise.race 是 JavaScript 中实现超时控制最简洁有效的方式之一，核心思路是让一个正常请求 Promise 与一个定时 reject 的 Promise 同时“赛跑”，谁先完成就采用谁的结果。

超时控制的基本结构

用 Promise.race 包裹两个 Promise：一个是业务请求（如 fetch），另一个是通过 setTimeout 封装的延迟 reject。一旦超时时间到，后者先触发 reject，整个 race 就立即失败，从而中断等待。

超时 Promise 必须是 reject 操作，否则无法中断成功响应
超时时间应略大于预期最长响应时间，避免误判（如网络抖动）
race 返回的 Promise 状态由第一个 settled（fulfilled 或 rejected）的子 Promise 决定

封装可复用的 timeout 函数

把超时逻辑抽离成独立函数，提升可读性和复用性：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

function timeout(promise, ms) {
  const timer = new Promise((_, reject) => {
    setTimeout(() => reject(new Error('Request timed out')), ms);
  });
  return Promise.race([promise, timer]);
}

使用时只需包装原始请求：

timeout(fetch('/api/data'), 5000)
  .then(res => res.json())
  .catch(err => {
    if (err.message === 'Request timed out') {
      console.log('接口响应超时');
    } else {
      console.log('其他错误：', err);
    }
  });