在 ES9（ECMAScript 2018）中，正式引入了一个新的关键字 for-await-of，用于处理异步迭代器（AsyncIterator）。相比于普通迭代器，异步迭代器是用于处理异步数据流的，比如 Promise、Generator、RxJS 等。在这篇文章中，我们将详细讲解 for-await-of 的使用及其在实际开发中的应用。
for-await-of 的语法
for-await-of 的语法与普通的 for-of 循环非常相似，只是将关键字中的 "of" 改成了 "await of"，下面是其基本语法：
----- -------- ----------- -
--- ----- ---- ---- -- -------------- -
-- ----
-
-其中，asyncIterable 是一个异步迭代器，item 表示当前遍历到的元素。需要注意的是，使用 for-await-of 循环时，函数必须声明为 async 函数，因为其内部需要使用 async/await 来处理异步迭代器的返回值。
异步迭代器
在 ES9 中，异步迭代器在处理异步数据流时很方便。异步迭代器的形式类似于普通的迭代器，只是其 next() 方法返回的是一个 Promise。
下面是一个简单的异步迭代器示例，每隔 1 秒钟返回一个 Promise。
----- -------- ---------------- -
--- ---- - - -- - -- -- ---- -
-- -- - --
----- --- --------------- -- ------------------- ------
-- ----- -
----- -
-
-通过上述代码，我们创建了一个异步迭代器 asyncGenerator，其会每隔 1 秒钟返回一个数值，从 1 到 5。
for-await-of 的应用实例
在实际开发中，for-await-of 有着广泛的应用。下面我们来看一个具体的示例，用 for-await-of 迭代异步迭代器 asyncGenerator，并在每个数字后加上 "hello"，然后输出。
----- -------- ----------- -
----- -------------- - ---------------
--- ----- ------ ---- -- --------------- -
---------------- - - -------
-
-
----- -------- --------------- -
--- ----- ------ ---- -- ----------------- -
---------------- - - -------
-
-通过上述代码，我们在 for-await-of 循环中使用了 asyncGenerator，然后在每个数字后面添加了 "hello"，最后输出结果。这个例子中，我们使用了 2 个 async 函数来实现对异步迭代器的迭代。
注意事项
在使用 for-await-of 时，需要有以下几个注意事项：
- 函数必须声明为 async 函数，因为其内部需要使用 async/await 来处理异步迭代器的返回值。
- 异步迭代器必须返回一个 Promise 对象（即 next() 方法返回的是一个 Promise），否则 for-await-of 将无法正常工作。
- 如果在异步迭代器的迭代过程中出现了错误，需要使用 try/catch 来处理。
总结
ES9 引入的 for-await-of 可以方便地处理异步迭代器的遍历，这在实际开发中非常实用。通过示例代码，我们学习了如何使用 for-await-of 来迭代异步迭代器，并掌握了一些注意事项。想要深入了解异步迭代器的更多知识，请查阅相关文献。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6645e55ed3423812e43f4840