背景
在进行前端开发时，我们经常需要对一个数组进行遍历操作，这时候我们通常会使用 Array.prototype.forEach() 方法。然而，如果我们需要在遍历过程中执行异步操作，就会遇到一些问题。
为了解决这个问题，ES7 中引入了一种异步执行版的 forEach，即 Array.prototype.forEach(async () => {})。但是，这种方法也存在一些坑点，本文将介绍这些坑点并提供解决方案。
坑点
1. 并发执行
在使用异步执行版的 forEach 时，我们需要注意的第一个问题是并发执行。由于异步操作不会阻塞代码的执行，所以 forEach 中的异步操作会立即执行，而不是等待上一个操作结束后再执行。
举个例子，假设我们需要对一个数组中的每个元素进行异步操作，并将结果存储在一个新数组中：
-- -------------------- ---- ------- ----- --- - --- -- --- ----- --- - --- ----------------- ------ -- - ----- ------ - ----- -------------------- ----------------- --- -----------------
这段代码看起来很合理，但实际上会输出一个空数组。这是因为 forEach 中的异步操作会立即执行，而 console.log(res) 的执行顺序比异步操作执行的顺序要快，所以此时 res 数组还没有被填充完整。
2. 异常处理
在使用异步执行版的 forEach 时，我们还需要注意异常处理。由于异步操作可能会抛出异常，我们需要确保能够正确捕获异常并进行处理。
举个例子，假设我们需要对一个数组中的每个元素进行异步操作，并将结果存储在一个新数组中。但是，如果某个元素的异步操作抛出了异常，我们需要将其记录下来并继续执行其他元素的操作：
-- -------------------- ---- -------
----- --- - --- -- ---
----- --- - ---
----------------- ------ -- -
--- -
----- ------ - ----- --------------------
-----------------
- ----- ------- -
---------------------
---------------
-
---
-----------------这段代码在捕获到异常时会将异常记录下来，并将 null 填充到结果数组中。
解决方案
为了解决上述问题，我们可以使用 Promise.all() 方法。Promise.all() 方法接受一个包含多个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象，该 Promise 对象在所有输入的 Promise 对象都已经 fulfilled 或者有一个 Promise 对象被 rejected 时才会 fulfilled 或 rejected。
我们可以将每个异步操作封装成一个 Promise 对象，并将这些 Promise 对象放入一个数组中，然后使用 Promise.all() 方法等待所有 Promise 对象均已 fulfilled 或 rejected。这样，我们就能够确保所有异步操作都已经执行完成，并且能够正确捕获异常。
举个例子，假设我们需要对一个数组中的每个元素进行异步操作，并将结果存储在一个新数组中。我们可以使用以下代码解决上述问题：
-- -------------------- ---- -------
----- --- - --- -- ---
----- -------- - ------------- ------ -- -
--- -
----- ------ - ----- --------------------
------ -------
- ----- ------- -
---------------------
------ -----
-
---
-------------------------------- -- -
-----------------
---这段代码中，我们使用 Array.prototype.map() 方法将每个异步操作封装成一个 Promise 对象，并将这些 Promise 对象放入一个数组中。然后，我们使用 Promise.all() 方法等待所有 Promise 对象均已 fulfilled 或 rejected，并在所有 Promise 对象都已经 fulfilled 或 rejected 时打印结果数组。
结论
使用异步执行版的 forEach 可以方便地对一个数组进行异步操作，但是我们需要注意并发执行和异常处理等问题。为了解决这些问题，我们可以使用 Promise.all() 方法等待所有异步操作执行完成，并确保能够正确捕获异常。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675b99aea4d13391d8f477bf