promise.all和promise.race的区别和使用
时间: 2025-05-14 14:01:24 浏览: 31
### Promise.all 和 Promise.race 的区别
#### 定义与行为
`Promise.all` 接收一个可迭代对象(通常是数组),并返回一个新的 `Promise` 实例。这个新实例会在所有传入的 `Promise` 都成功完成时才会进入 fulfilled 状态,其结果是一个按顺序排列的结果数组[^1]。
相比之下,`Promise.race` 同样接收一个可迭代对象作为参数,但它会立即返回第一个被解决或拒绝的 `Promise` 的状态和值。这意味着无论其他 `Promise` 是否已经完成,只要有一个完成了操作,整个链就会结束[^2]。
#### 使用示例
以下是两者的具体用法:
```javascript
// Promise.all 示例
Promise.all([
Promise.resolve(1),
Promise.resolve(2),
Promise.resolve(3)
]).then(results => {
console.log(results); // 输出: [1, 2, 3]
}).catch(error => {
console.error(error);
});
```
对于 `Promise.race` 来说,它会选择最快完成的那个 `Promise` 并执行相应的回调函数:
```javascript
const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'one'));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'two'));
Promise.race([promise1, promise2]).then(value => {
console.log(value); // 输出: "two"
});
```
#### 错误处理机制
当使用 `Promise.all` 时,如果任何一个输入的 `Promise` 被拒绝,则最终的 `Promise` 将会被拒绝,并且不会等待其他的 `Promise` 结束。而 `Promise.race` 则更加简单粗暴——一旦有任意一个 `Promise` 进入 rejected 或 resolved 状态即刻触发相应逻辑。
#### 应用场景分析
- **Promise.all**: 当需要确保多个异步任务全部完成后才继续下一步工作的时候非常有用。比如,在加载页面所需的所有资源之前阻止渲染过程直到它们都准备就绪[^3]。
- **Promise.race**: 更适合于设置超时或者监控哪个请求最先响应的情况。例如可以用来防止某些慢速 API 延迟影响用户体验通过设定最大等待时间来实现快速失败策略。
```javascript
function timeOutPromise(timeout){
return new Promise((_,reject)=>{
setTimeout(()=>{reject('timeout')}, timeout);
});
}
Promise.race([promise1,timeOutPromise(5000)]).then(res=>{
console.log(res);
}).catch(err=>console.warn(err));
```
上述代码片段展示了如何利用 `Promise.race` 创建具有超时功能的任务组合。
阅读全文
相关推荐

















