在 Web 开发中，经常会涉及同时执行多个异步操作的场景。比如同时获取多个数据源，等待所有的数据源返回结果后再处理结果。在过去，常常通过使用回调、事件监听等方式来实现；而在 ES6 中引入的 Promise，使得异步编程变得更加简单和可读。
Promise.all() 是 Promise 中非常有用的方法之一，它可以接收一个数组，然后返回一个 Promise 对象，用于等待所有的 Promise 对象都被解决（resolved）、或者任意一个 Promise 被拒绝（rejected）。本文将为大家详细介绍 ECMAScript 2019 的 Promise.all()，并提供示例代码解释该方法的用法和学习指导。
Promise.all() 的用法
Promise.all() 是一个非常强大的方法，它可以帮助开发者避免同时执行多个异步操作的混乱和错误。可以说，Promise.all() 是在 Promise 基础上的一次巨大的改进。它允许开发者将多个 Promise 对象在同一时间点下进行处理。让我们看下示例代码：
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);
Promise.all([promise1, promise2, promise3])
.then(([result1, result2, result3]) => {
console.log(result1, result2, result3); // 1 2 3
});这段代码中，先创建了三个 Promise 对象，它们分别返回 1，2 和 3。这个数组随后被传递给 Promise.all() 中。在 Promise.all() 的 then() 函数中，参数接收的值就是我们传递的 Promise 对象的结果集。对应的，我们将 results 数组解构得到了 result1，result2 和 result3，最后打印这些值，得到了结果 1 2 3。
值得注意的是：Promise.all() 的结果数组中的值的顺序与传递的 promise 数组中的值的顺序是一致的。
常见的错误
在使用 Promise.all() 时，常常会遇到一些常见的误区：
1. 数组中包含非 Promise 对象
如果传递给 Promise.all() 的数组中有一个不是 Promise 对象，那么它将被忽略并不会执行操作。这种错误通常是由于数组中包含了一些非 Promise 对象而导致的。
-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - -------------------
----- ------- - --------- ---------
---------------------- --------- ------------
---------------- -------- --------------- -- -
-------------------- --------- -- - -
----------------------------- ---- -- ------- ----- -----
---可以看到，在这个示例代码中，字符串数组被加入了 Promise.all() 中。在解构 Promise 结果的时候，也在该数组前面加上了省略号（...）。这可以解决我们无法访问其中的字符串数组的问题。
2. 拒绝处理程序没有指定
当 Promise.all() 中的 Promise 对象被拒绝时，它将立即返回一个拒绝（rejected）状态的 Promise 对象。如果对这个 Promise 没有指定处理程序，那么它就会抛出一个未捕获的异常，并且可能会导致代码出现问题。
const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('Failed'));
Promise.all([promise1, promise2])
.then(([result1, result2]) => {
console.log(result1, result2);
});如果运行这段代码，会得到一个异常：
Error: Failed
at Object.<anonymous> (PromiseAll.mjs:4:27)上述示例代码中，promise2 是一个被拒绝的 Promise 对象。由于未在 Promise.all() 外部指定处理程序，因此这个代码将抛出一个未捕获的异常。
为了避免这种情况，开发者应该总是使用 catch() 方法指定拒绝处理程序。
3. 超时
在一些情况下，我们需要等待所有的异步操作，但是当等待时间过长时，我们需要放弃等待并采取另外的措施。这时候，Promise.race() 可以满足需求，我们可以设置一个定时器，在一定时间内如果异步操作没有完成，那么就执行其他的操作。
-- -------------------- ---- -------
----- ----- - ---- --
--- --------------- -- ------------- -- ---------- -------
----- ----- - -
------------
------------
-----------
--
----- --------------- - -----
--------------
-------------------
------------------------------ -- -
----- --- -------------- ---- ---- -- -------------------- ------------
--
--
---------------- -------- --------- -- -
-------------------- -------- ---------
--
------------ -- ------------------------------在这个示例代码中，我们使用了 Promise.race() 方法，接收两个数组作为参数：第一个数组包含我们想等待的异步任务，第二个数组包含了一个我们希望在等待时间过长时执行的 Promise 对象。在这个示例中，我们希望在 4000 毫秒时，如果 Promise.all() 方法还没有执行完毕，那么就抛出一个最大等待时间已到的错误。
总结
Promise.all() 是在 ES6 中引入的一项强大的异步编程工具，它可以使得代码更加可读，避免代码中的混乱和错误，并且能够提高性能。在使用 Promise.all() 时，需要避免一些常见的错误，并且理解该方法的工作原理。当遇到需要同时执行多个异步操作的场景时，Promise.all() 能够满足需求，并为我们提供一种有效的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486d40e48841e9894564f19