promise.race用于多个异步操作中取最先settled的结果，适用于超时控制、多源竞速等场景；需配合abortcontroller防泄漏，并注意其不取消仍在运行的promise。
Promise.race 不是用来解决传统多线程意义上的“竞态条件（Race Condition）”，而是用来应对**多个异步操作谁先完成谁就胜出**的场景——也就是“竞速”逻辑。它天然适合处理多个数据源中取最快响应、设置超时、降级兜底等实际需求。
用 Promise.race 实现请求超时控制
这是最典型的用途：防止某个接口长期挂起，影响整体体验。你可以把原始请求和一个定时 reject 的 Promise 一起传入 race。
例如：
function fetchWithTimeout(url, timeout = 5000) {
const controller = new AbortController();
const timeoutPromise = new Promise((_, reject) => {
setTimeout(() => {
controller.abort();
reject(new Error('Request timed out'));
}, timeout);
});
const fetchPromise = fetch(url, { signal: controller.signal });
return Promise.race([fetchPromise, timeoutPromise]);
}
// 使用
fetchWithTimeout('/api/data')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error('Failed:', err.message));
注意点：
- 需配合
AbortController主动中断未完成的 fetch，避免资源泄漏 - timeoutPromise 中 reject 的错误应有明确语义，便于上层区分是超时还是业务错误
- 若不 abort，fetch 可能仍在后台运行，只是结果被 race 忽略了
从多个数据源中取最快返回的结果
当存在多个可选的数据源（如主站 API、备用 CDN、本地缓存、Mock 数据），可用 race 拿第一个成功响应，提升首屏速度或容灾能力。
示例（优先用缓存，但不阻塞）：
const cachePromise = caches.match('/data').then(res => res?.json());
const apiPromise = fetch('/api/data').then(r => r.json());
const mockPromise = Promise.resolve({ message: 'mock fallback' });
Promise.race([cachePromise, apiPromise, mockPromise])
.then(data => render(data))
.catch(() => console.warn('All sources failed'));
关键细节：
- 所有 Promise 都会立即启动，race 不会等待或取消其余项（失败或成功都继续执行）
- 如果某个 Promise 永远不 resolve/reject（如漏写 catch 或没处理 reject），race 就永远不结束 → 务必确保每个分支都有终态
- 建议对可能失败的 Promise 做兜底包装，比如
.catch(() => Promise.resolve(null))，避免因某一项 reject 导致整个 race 失败
与 Promise.any 的区别：何时该用哪个？
很多人混淆 race 和 any：
- Promise.race：只要任意一个 settle（无论 resolve 还是 reject），就立刻结束，并返回那个结果 —— 所以一个 reject 就会让整个 race 报错
- Promise.any：等待第一个 resolve，忽略 reject；全部 reject 才 reject（带 AggregateError）
因此：
- 要“取最快的成功结果”，且能容忍个别失败 → 用
any - 要“一旦有失败就立刻中断流程”（如鉴权失败立即跳登录页），或需要严格控制响应时间 → 用
race+ 显式 reject 控制
常见陷阱与规避方式
容易踩坑的地方：
-
未处理 reject 导致静默失败：Promise.race([p1, p2]) 中若 p1 reject 而 p2 resolve 很慢，race 就直接 reject，后续 then 不执行 → 解决方法是对每个 Promise 做
.catch(e => Promise.resolve({ error: e }))包装，统一转为 resolve - 副作用无法撤销：race 返回结果后，其他 Promise 仍在运行（如发了两个 API 请求），后端仍会处理 → 若需真正取消，请用 AbortController 或服务端支持 cancel token
- 误以为 race 能“同步取消”其他任务：JavaScript 中 Promise 是不可取消的抽象，race 只是选择结果，不是终止执行
不复杂但容易忽略。核心就是记住：race 是“谁先落地谁说话”，不是“谁快谁赢，慢的自动消失”。合理封装 + 明确错误策略，才能真正用好它。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
