promise.all和promise.race

### Promise.all 和 Promise.race 的区别与使用场景 #### 1. **Promise.all 的用法** `Promise.all` 方法用于将多个 Promise 实例包装成一个新的 Promise 实例。它会在所有传入的 Promise 都成功完成后才返回一个包含所有结果的数组[^3]。如果其中任何一个 Promise 被拒绝（rejected），则 `Promise.all` 会立即返回被拒绝的值，并忽略其他 Promise 的执行结果。 ```javascript let p1 = Promise.resolve('成功了'); let p2 = Promise.resolve('success'); Promise.all([p1, p2]).then((result) => { console.log(result); // 输出: ['成功了', 'success'] }).catch((error) => { console.log(error); }); ``` 如果其中一个 Promise 被拒绝，则 `Promise.all` 会直接进入 `catch` 分支，并输出第一个被拒绝的错误信息[^3]。 ```javascript let p1 = Promise.resolve('成功了'); let p2 = Promise.reject('失败'); Promise.all([p1, p2]).then((result) => { console.log(result); }).catch((error) => { console.log(error); // 输出: '失败' }); ``` #### 2. **Promise.race 的用法** `Promise.race` 方法同样接受一个 Promise 实例的数组作为参数，但它会返回第一个完成的 Promise 的结果，无论这个结果是成功还是失败[^2]。一旦有一个 Promise 完成，其余的 Promise 将被忽略。 ```javascript let p1 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'A')); let p2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'B')); Promise.race([p1, p2]).then((result) => { console.log(result); // 输出: 'B'，因为 p2 更快完成 }).catch((error) => { console.log(error); }); ``` 如果第一个完成的 Promise 是被拒绝的，则 `Promise.race` 会直接进入 `catch` 分支[^2]。 ```javascript let p1 = Promise.reject('Error'); let p2 = Promise.resolve('Success'); Promise.race([p1, p2]).then((result) => { console.log(result); }).catch((error) => { console.log(error); // 输出: 'Error'，因为 p1 更快完成 }); ``` #### 3. **Promise.all 和 Promise.race 的区别** - **执行方式**： - `Promise.all` 等待所有 Promise 都完成，才会进入 `then` 分支[^3]。 - `Promise.race` 只需要一个 Promise 完成就会触发回调，无需等待其他 Promise[^2]。 - **返回结果**： - `Promise.all` 返回一个包含所有 Promise 结果的数组[^3]。 - `Promise.race` 返回第一个完成的 Promise 的结果，无论是成功还是失败[^2]。 - **错误处理**： - 在 `Promise.all` 中，只要有一个 Promise 被拒绝，整个操作就会失败并进入 `catch` 分支。 - 在 `Promise.race` 中，第一个完成的 Promise 决定了最终的结果，无论它是成功还是失败[^2]。 #### 4. **使用场景** - **Promise.all 的使用场景**： - 当需要同时发起多个异步请求，并且只有在所有请求都成功完成后才能继续下一步操作时，可以使用 `Promise.all`[^3]。 - 例如：从多个 API 获取数据后进行汇总分析。 - **Promise.race 的使用场景**： - 当需要从多个来源获取相同的数据，并选择最快返回的那个时，可以使用 `Promise.race`[^2]。 - 例如：向多个镜像服务器发送请求，哪个服务器先响应就使用哪个结果。 ### 示例代码 ```javascript // 使用 Promise.all let api1 = fetch('https://api.example.com/data1'); let api2 = fetch('https://api.example.com/data2'); Promise.all([api1, api2]).then((responses) => { return Promise.all(responses.map(response => response.json())); }).then((data) => { console.log(data); // 处理两个 API 的数据 }).catch((error) => { console.error(error); }); // 使用 Promise.race let fastApi1 = fetch('https://fast-api1.example.com/data'); let fastApi2 = fetch('https://fast-api2.example.com/data'); Promise.race([fastApi1, fastApi2]).then((response) => { return response.json(); }).then((data) => { console.log(data); // 使用最快返回的 API 数据 }).catch((error) => { console.error(error); }); ```