在前端开发中，异步操作是必不可少的一部分。尤其是在处理大量数据或者请求多个接口时，无法避免要进行异步操作。然而，当需要并行遍历多个异步操作时，原本简单的代码变得复杂难以维护。这时候，ECMAScript 2019 中的 for await…of 循环就能够派上用场。
为什么需要 for await...of？
在使用异步操作的时候，我们通常通过 Promise.all() 方法实现并行操作，并等待所有异步完成之后再进行下一步操作。例如：
const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then((results) => {
console.log(results); // [1, 2, 3]
});然而，在遍历异步操作时，Promise.all() 方法就无法满足我们的需求了。例如，我们需要同时遍历多个数组并进行相关操作：
-- -------------------- ---- -------
----- -------- ----------------- -
----- ---- - -------------------- ------------------- --------------------
----- ---- - -------------------- ------------------- --------------------
----- ------- - ----- ------------------
----- ------- - ----- ------------------
--- ---- - - -- - - --------------- ---- -
---------------------- - ------------
-
-上面的代码中，我们将两个数组中的每个元素都进行了异步操作，并将结果存储在 result1 和 result2 中。然后通过 for 循环遍历并输出相加后的结果。
这种方式很明显会增加代码的复杂度和重复性。更重要的是，在遍历数组时，我们每次都需要对其进行 await 操作，导致整个遍历操作变得非常低效。
这时候，我们就需要使用 ECMAScript 2019 中的 for await...of 语法。
for await...of 的用法
for await...of 语法用于遍历异步操作返回的对象。它的语法和 for…of 非常相似，只是多了一个 await 关键字：
-- -------------------- ---- -------
----- -------- --------------- -
----- -------- - -------------------- ------------------- --------------------
--- ----- ---- ------ -- --------- -
--------------------
-
-
----------------上面的代码中，我们使用了 for await...of 循环遍历了一个包含三个 Promise 的数组，并依次输出了每个 Promise 的结果。需要注意的是，在循环中我们使用了 await 关键字来获取异步操作的结果。
如果要遍历多个异步操作的结果并进行相关操作，我们可以将异步操作的返回值封装到一个异步迭代器中，然后通过 for await...of 循环遍历并操作它们：
-- -------------------- ---- -------
----- -------- --------------- -
----- ---- - -------------------- ------------------- --------------------
----- ---- - -------------------- ------------------- --------------------
----- ------------- - -
----- ------------------------- -
------ -----
------ -----
--
--
--- ----- ---- ------ -- -------------- -
--------------------
-
-
----------------上面的代码中，我们将 arr1 和 arr2 中的 Promise 封装到一个异步迭代器中，并通过 for await...of 循环遍历了整个迭代器并输出了 Promise 的结果。
可以看出，使用 for await...of 循环处理多个异步操作的返回值，代码会变得更加简洁和易于维护。
使用 for await...of 解决并行遍历异步操作的实例
下面我们来看一个实际的例子：在 Node.js 中使用 for await...of 循环从多个 URL 中获取与搜索词相关联的 HTML。
-- -------------------- ---- -------
----- ----- - ----------------------
----- -------- -------------- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
-
----- -------- ----------------- ------ -
----- ------------- - -
----- ------------------------- -
------ ------
--
--
--- ----- ---- ---- -- -------------- -
----- --- - -------------------------
----- ---- - ----- ---------------
------------------
-
-
------------------------------------- ------------------------ --------------上面的代码中，我们使用 for await...of 循环并行遍历了多个 URL，并通过 fetchHTML() 函数获取了 HTML 内容。需要注意的是，在遍历多个 URL 的时候，我们使用了异步迭代器来封装多个 Promise，并使用了 await 关键字来获取 Promise 的返回值。
结论
在 ECMAScript 2019 中，for await...of 循环为我们处理多个异步操作返回的对象提供了非常便捷的方法。通过使用异步迭代器和 await 关键字，我们可以轻松地处理异步操作并行遍历的问题，使代码更加简洁和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671a030d9babaf620fa06fa7