Promise.all()
和 Promise.race()
都是 Promise 提供的两个个静态方法,均用于处理多个异步任务,但它们的核心行为和适用场景有显著区别:
1. 核心行为差异
特性 | Promise.all(iterable) |
Promise.race(iterable) |
---|---|---|
触发条件 | 等待所有 Promise 都变为 fulfilled 才成功 |
只要第一个完成的 Promise(无论成功或失败)就触发 |
结果返回 | 返回所有 Promise 的结果数组(按传入顺序) | 返回第一个完成的 Promise 的结果(成功值或错误原因) |
失败处理 | 只要有一个 Promise 失败,立即返回该错误(快速失败) | 第一个失败的 Promise 会直接导致整体失败 |
2. 代码示例对比
(1)Promise.all()
:等待所有完成
const p1 = new Promise(resolve => setTimeout(() => resolve("p1完成"), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve("p2完成"), 2000));
const p3 = new Promise(resolve => setTimeout(() => resolve("p3完成"), 1500));
Promise.all([p1, p2, p3])
.then(results => {
console.log("所有完成:", results);
// 输出:所有完成:["p1完成", "p2完成", "p3完成"](约2秒后,等待最慢的p2)
});
(2)Promise.race()
:以第一个完成的为准
const p1 = new Promise(resolve => setTimeout(() => resolve("p1完成"), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve("p2完成"), 2000));
const p3 = new Promise((_, reject) => setTimeout(() => reject("p3失败"), 500)); // 最快完成(失败)
Promise.race([p1, p2, p3])
.then(result => {
console.log("第一个成功:", result); // 不会执行
})
.catch(error => {
console.error("第一个结果是错误:", error); // 输出:第一个结果是错误:p3失败(500ms后)
});
3. 适用场景
Promise.all()
:
适合需要所有异步任务都完成后再处理结果的场景,例如:- 并行请求多个接口,合并数据后渲染页面;
- 批量上传多个文件,全部完成后提示“上传成功”。
Promise.race()
:
适合只关心第一个完成的任务结果的场景,例如:- 设置请求超时时间(将接口请求与一个定时器 Promise 竞速,超时则触发失败);
- 从多个镜像服务器请求资源,使用第一个返回的结果。
总结
Promise.all()
是“全成则成,一败则败”,强调等待所有任务完成。Promise.race()
是“先到为准,不论成败”,强调获取第一个完成的结果。
两者均为处理并发异步任务的重要工具,需根据具体场景选择使用。