摘要: 在本教程中，您将学习如何使用 Promise.all() 静态方法来聚合多个异步操作的结果。
JavaScript Promise.all() 方法简介
Promise.all() 静态方法接受一个包含 可迭代对象 的 Promise。
Promise.all(iterable);Code language: JavaScript (javascript)Promise.all() 方法返回一个单个 Promise，当所有输入 Promise 都已解析时，该 Promise 会解析。返回的 Promise 解析为一个包含输入 Promise 结果的数组。
在此图中，promise1 在 t1 时解析为值 v1，promise2 在 t2 时解析为值 v2。因此，Promise.all(promise1, promise2) 返回一个在 t2 时解析为一个数组的 Promise，该数组包含 promise1 和 promise2 的结果 [v1, v2]。
换句话说，Promise.all() 等待所有输入 Promise 解析，并返回一个新的 Promise，该 Promise 解析为一个数组，其中包含输入 Promise 的结果。
如果其中一个输入 Promise 被拒绝，则 Promise.all() 方法会立即返回一个被拒绝的 Promise，该 Promise 会使用第一个被拒绝的 Promise 的错误。
在此图中，promise2 在 t1 时使用 error 拒绝。因此，Promise.all() 返回一个新的 Promise，该 Promise 会立即使用相同的错误拒绝。此外，Promise.all() 不关心其他输入 Promise，无论它们是解析还是拒绝。
在实践中，Promise.all() 有助于聚合来自多个异步操作的结果。
JavaScript Promise.all() 方法示例
让我们来看一些示例，以了解 Promise.all() 方法是如何工作的。
1) 已解析的 Promise 示例
以下 Promise 在 1、2 和 3 秒后分别解析为 10、20 和 30。我们使用 setTimeout() 来模拟异步操作
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('The first promise has resolved');
resolve(10);
}, 1 * 1000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('The second promise has resolved');
resolve(20);
}, 2 * 1000);
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('The third promise has resolved');
resolve(30);
}, 3 * 1000);
});
Promise.all([p1, p2, p3]).then((results) => {
const total = results.reduce((p, c) => p + c);
console.log(`Results: ${results}`);
console.log(`Total: ${total}`);
});
Code language: JavaScript (javascript)输出
The first promise has resolved
The second promise has resolved
The third promise has resolved
Results: 10,20,30
Total: 60
当所有 Promise 都已解析后，来自这些 Promise 的值将作为数组传递到 then() 方法的回调中。
在回调中，我们使用数组的 reduce() 方法来计算总值，并使用 console.log 来显示值的数组以及总值。
2) 被拒绝的 Promise 示例
如果任何输入 Promise 被拒绝，Promise.all() 将返回一个被拒绝的 Promise。
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('The first promise has resolved');
resolve(10);
}, 1 * 1000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('The second promise has rejected');
reject('Failed');
}, 2 * 1000);
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('The third promise has resolved');
resolve(30);
}, 3 * 1000);
});
Promise.all([p1, p2, p3])
.then(console.log) // never execute
.catch(console.log);
Code language: JavaScript (javascript)输出
The first promise has resolved
The second promise has rejected
Failed
The third promise has resolved
在此示例中，我们有三个 Promise：第一个在 1 秒后解析，第二个在 2 秒后拒绝，第三个在 3 秒后解析。
因此，返回的 Promise 被拒绝，因为第二个 Promise 被拒绝。catch() 方法被执行以显示拒绝 Promise 的原因。
总结
Promise.all()方法接受一个 Promise 列表，并返回一个新的 Promise，如果所有输入 Promise 都已解析，则该 Promise 解析为一个包含输入 Promise 结果的数组，或者使用第一个被拒绝的 Promise 的错误拒绝。- 使用
Promise.all()方法来聚合来自多个异步操作的结果。
