在前端开发中，我们常常需要用到异步编程来处理一些耗时的操作，例如从服务器获取数据或者执行一些计算密集型的任务。ECMAScript 2018 引入了 async await 函数，使得异步编程更加容易和直观。但是，当我们在 for 循环中使用 async await 函数时，就会遇到一些异步问题。
问题描述
假设我们有一个数组，每个元素都需要异步处理，然后我们需要将处理后的结果存储到另一个数组中。我们可能会尝试使用 for 循环来遍历数组，并在循环内部使用 async await 函数来处理每个元素。例如：
-- -------------------- ---- ------- ----- --- - --- -- -- -- --- ----- ------ - --- --- ---- - - -- - - ----------- ---- - ----- --------- - ----- -------------------- ----------------------- - --------------------
在上面的代码中，我们假设 processData 函数是一个异步函数，它会处理传入的参数并返回一个新的结果。我们使用 for 循环来遍历 arr 数组，并在循环内部使用 async await 函数来处理每个元素。我们将处理后的结果存储到 result 数组中，最后打印出 result 数组。
这个代码看起来很合理，但是实际上它存在一个问题：循环内部的异步操作是并发执行的，而不是按顺序执行的。这意味着我们不能保证 result 数组中的元素顺序与 arr 数组中的元素顺序一致。
解决方案
为了解决这个问题，我们可以使用 Promise.all 方法和 map 函数来处理数组。Promise.all 方法可以接收一个包含多个 Promise 的数组，并在所有 Promise 都完成后返回一个新的 Promise。这个新的 Promise 的结果是一个包含所有 Promise 结果的数组，这个数组的顺序与 Promise 数组的顺序一致。
我们可以将 arr 数组转换成一个 Promise 数组，每个 Promise 都代表一个元素的异步处理结果，并使用 Promise.all 方法来等待所有 Promise 完成。然后我们可以使用 map 函数来将 Promise 结果转换成 result 数组。
例如：
-- -------------------- ---- ------- ----- --- - --- -- -- -- --- ----- -------- - ------------- ------ -- - ----- --------- - ----- ------------------ ------ ---------- --- ----- ------ - ----- ---------------------- --------------------
在上面的代码中，我们使用 map 函数来将 arr 数组转换成一个 Promise 数组。每个 Promise 都代表一个元素的异步处理结果。然后我们使用 Promise.all 方法来等待所有 Promise 完成，并将结果存储到 result 数组中。
这种方式可以保证异步操作按顺序执行，并保证 result 数组的顺序与 arr 数组的顺序一致。
示例代码
下面是一个完整的示例代码，演示了如何使用 Promise.all 方法和 map 函数来处理异步操作：
-- -------------------- ---- -------
----- -------- ----------------- -
------ --- ----------------- -- -
------------- -- -
------------ - ---
-- ------------- - ------
---
-
----- -------- ------ -
----- --- - --- -- -- -- ---
----- -------- - ------------- ------ -- -
----- --------- - ----- ------------------
------ ----------
---
----- ------ - ----- ----------------------
--------------------
-
-------在上面的代码中，我们定义了一个 processData 函数，它会异步处理传入的参数并返回一个新的结果。我们使用 Math.random() * 1000 来模拟异步操作的耗时。
然后我们定义了一个 main 函数，它会使用 Promise.all 方法和 map 函数来处理异步操作。我们将 arr 数组转换成一个 Promise 数组，并使用 Promise.all 方法来等待所有 Promise 完成。最后我们将结果存储到 result 数组中，并打印出 result 数组。
总结
在使用 async await 函数时，我们需要注意循环内部的异步操作是并发执行的，而不是按顺序执行的。为了解决这个问题，我们可以使用 Promise.all 方法和 map 函数来处理数组。这种方式可以保证异步操作按顺序执行，并保证结果数组的顺序与原数组的顺序一致。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66166ba0d10417a22265cc37