javascript Promise.race是什么_它有什么实际用途？_网络技术

javascript Promise.race是什么_它有什么实际用途？

发布时间 - 2026-01-10 00:00:00 点击率：次

Promise.race返回首个settled的Promise结果，不取消其余Promise；典型用途是超时控制，需配合AbortController避免假成功；与all、any的区别在于race以首个settled为准，无论成功或失败。

Promise.race 是一个静态方法，它接收一个 Promise 实例数组，返回一个新的 Promise。这个新 Promise 的状态**由第一个 settle（即 resolve 或 reject）的成员决定**——谁先完成，就用谁的结果或错误。

Promise.race 常见误用：以为它“取消”其他 Promise

这是最常被误解的一点：Promise.race 不会中断、终止或取消其余未完成的 Promise。它们仍在后台运行，只是你不再“监听”它们的结果了。

比如 Promise.race([fetch('/api'), new Promise(r => setTimeout(r, 5000))]) 中，如果 fetch 在 5 秒后才返回，但超时 Promise 先 resolve，那 race 返回的 Promise 就已 fulfilled；可 fetch 请求依然在发、响应依然可能到达，只是你没处理它
真正要做请求取消，得用 AbortController 配合 fetch，而不是依赖 race
如果你发现 race 后还有副作用（如重复弹窗、多次调用回调），大概率是没清理掉其他 Promise 的后续逻辑

实际可用的典型场景：超时控制

这是 Promise.race 最稳定、最无副作用的用法。它不改变原始操作，只给它加一层“时间封顶”保障。

function timeout(ms, promise) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), ms);
  
  return Promise.race([
    promise,
    new Promise((_, reject) => {
      controller.signal.addEventListener('abort', () => {
        clearTimeout(timeoutId);
        reject(new Error('Request timed out'));
      });
    })
  ]);
}

// 使用
timeout(3000, fetch('/data')).then(res => res.json()).catch(err => console.error(err));

注意：上面示例用了 AbortController 而不是简单的 new Promise(resolve => setTimeout(resolve, ms))，是为了避免“假成功”——比如超时 Promise resolve 了，但原 Promise 其实也完成了，只是你没拿到结果
若用纯 setTimeout 构造超时 Promise，要确保它只 reject，不能 resolve，否则可能掩盖真实错误
超时时间设太短（如 100ms）在弱网下容易误判；设太长（如 30s）又失去意义；建议结合业务接口历史 P95 延迟来定

Promise.race 和 Promise.all、Promise.any 的关键区别

别把 race 当成“并发执行多个请求并取最快一个”的万能工具。它的行为和用途边界很明确：

立即学习“Java免费学习笔记（深入）”；

Promise.all：全部 resolve 才 resolve；任一 reject 就 reject —— 适合强一致性依赖
Promise.any：任一 resolve 就 resolve；全部 reject 才 reject —— 适合容错式多源查询（如查 CDN、主站、备用 API）
Promise.race：第一个 settle 就结束（无论 resolve 还是 reject）—— 所以它既可能返回成功结果，也可能直接抛出错误，使用时必须 .catch 或 try/catch
如果只想取“最快的成功结果”，别用 race，改用 Promise.any；race 的“快”不保成功，只保“先落地”

真正要用好 Promise.race，关键是盯住那个“第一个 settle”的不可预测性——它可能是正常响应，也可能是网络中断、服务崩溃、甚至你自己写的调试 reject。别假设它一定代表“成功”。

# javascript # java # js # json # 工具 # cdn # 区别

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：GitLens深度使用教程：在VSCode中驾驭Git

下一篇：美团众包官方网站首页美团众包平台登录入口

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：GitLens深度使用教程：在VSCode中驾驭Git

下一篇：美团众包官方网站首页美团众包平台登录入口