Promise.all和Promise.race的区别和使用

Promise.all和Promise.race都是Promise的静态方法，但它们有着不同的应用场景。 Promise.all方法接受一个包含多个Promise实例的数组作为参数，返回一个新的Promise实例。这个新的Promise实例在数组中所有的Promise实例都成功时才会被resolved，其中一个Promise实例失败则会被rejected。此外，Promise.all返回的Promise实例的resolved值是由所有Promise实例resolved值组成的数组。 而Promise.race方法同样接受一个包含多个Promise实例的数组作为参数，但返回的新的Promise实例在数组中有任意一个Promise实例率先被resolved或rejected时就会返回对应的结果，忽略其它Promise实例的状态。 简而言之，Promise.all方法适用于等待多个异步操作全部完成后再进行下一步操作的场景，而Promise.race方法则适用于只要有一个异步操作完成即可进行下一步操作的场景。

### 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` 创建具有超时功能的任务组合。