在 ES2018 中，JavaScript 引入了两个非常重要的特性，即 async 和 await。这两个关键字让我们可以更方便地处理异步代码，避免了回调地狱的问题。但是，在处理多个异步操作，尤其是在遍历异步操作时，我们还需要更多的工具来简化代码。
在 ES10 中，我们看到了一些新的语法特性，其中最重要的就是 for-await-of。这个新语法简化了异步遍历的过程，让我们能够更容易地遍历异步操作的结果。在本文中，我们将介绍 for-await-of 的语法，以及它在实际开发中的应用。
for-await-of 的语法
在 ES10 中，我们可以使用 for-await-of 来遍历一个异步操作的结果。它的语法如下：
for await (const item of asyncIterable) {
// 处理 item
}这里，item 是每个异步操作的结果，asyncIterable 是一个异步可迭代对象，它可以返回一个包含异步操作的结果的迭代器。在循环过程中，我们可以使用 await 关键字来暂停执行，等待每个异步操作完成。
你可以将 for-await-of 与 async 和 await 结合使用，来处理一个包含异步操作的数组、集合或其他数据结构。下面是一个例子：
-- -------------------- ---- -------
----- -------- --------------- -
--- - - --
----- -- - -- -
----- --- --------------- -- ------------------- ------
----- ----
-
-
------ ---------- -
--- ----- ------ --- -- ---------------- -
-----------------
-
-----这个例子中，我们定义了一个名为 asyncIterable 的异步生成器，它在每次迭代时等待 1 秒钟，然后返回下一个数字。我们接着使用 for-await-of 循环异步生成器的结果，用 await 暂停执行，等待每个异步操作的结果。在循环过程中，我们输出每个数字，最终输出结果将是 0、1 和 2。
使用 for-await-of 处理异步操作
在实际开发中，我们经常需要处理多个异步操作，如异步读取文件、异步发送网络请求等。使用 for-await-of 可以简化这样的操作，让我们避免使用回调函数或 .then() 方法。下面是一些使用 for-await-of 处理异步操作的例子。
遍历异步生成器的结果
我们可以使用 for-await-of 遍历异步生成器的结果，从而完成异步操作的遍历。下面是一个传统的延时输出的例子：
-- -------------------- ---- -------
----- -------- ----------------- -
--- ---- - - -- - -- -- ---- -
----- --- --------------- -- ------------------- - - -------
----- --
-
-
----- -------- ---------------- -
--- ----- ------ --- -- ------------------ -
-----------------
-
-
-----------------在这个例子中，我们定义了一个 asyncGenerator 异步生成器，它每次等待一秒钟才返回一个数字，返回的数字逐步增加。我们使用 for-await-of 循环异步生成器的结果，从而实现延时输出的效果。当我们调用 delayedOutput(5) 时，会输出 1 到 5，每个数字延时一秒钟输出一次。
处理异步集合的结果
我们还可以将 for-await-of 用于异步集合的遍历，如异步读取文件和异步发送请求等。下面是一个异步读取文件的例子：
-- -------------------- ---- -------
----- -- - --------------
----- -------- ---------------- -
--- ----- ------ ---- -- ------ -
----- ------- - ----- -------------------------- ---------
---------------------
-
-
---------------------------- ----------------- -------------------在此例中，我们使用了 fs.promises.readFile() 方法来异步读取文件，并返回文件内容。我们使用 for-await-of 循环文件路径数组，逐个读取每个文件。每个文件读取完成后，我们输出它的内容。
并发处理异步操作
除了使用 for-await-of 循环异步操作，我们还可以使用 Promise.all() 和 Promise.race() 方法来并行执行多个异步操作，并等待它们全部完成或其中任意一个完成。
例如，我们可以使用 Promise.all() 方法来并行执行多个异步操作，如下所示：
-- -------------------- ---- ------- ----- -------- ------------------- - ----- -------- - ------------ -- ------------ ----- --------- - ----- ---------------------- ----- -------- - ----------------- -- ------------ ------ --------- - --------------- -------------------------------- -------------------------------- -------------------------------- ---
这里，我们并行执行多个 fetch() 异步请求，然后等待它们全部完成，将结果保存在 responses 数组中。接着，我们使用 map() 方法将每个响应对象转换为响应文本，最后将文本内容保存在 contents 数组中。
总结
在 ES10 中，for-await-of 语法让我们更方便地处理异步操作的遍历，避免了回调地狱的问题。我们可以将它与异步生成器、异步集合和 Promise.all() / Promise.race() 方法结合使用，来处理异步代码，让代码更简洁易懂。在实际项目中，我们应该广泛使用 for-await-of 语法，以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c713dc10032fedd3905fcb