在现代的前端应用程序中，异步编程已经成为了不可或缺的特性。为了增强异步编程的体验，每个 JavaScript 版本都会引入有用的功能。其中，ES8 中的 Async 迭代器是一项非常重要的技术，它可以使异步数据源的处理变得更加轻松和高效。
这篇文章将会说明什么是 Async 迭代器、为什么它很重要、它怎么使用以及如何将其运用在实际的项目中。最后，我们还将包括一些示例代码，以帮助你更好地理解 Async 迭代器的用法。
什么是 Async 迭代器？
在理解 Async 迭代器之前，我们需要先了解什么是迭代器。迭代器是用于遍历数据结构的 JS API，比如 Array、Map、Set 等。通常，迭代器由 next() 方法和 done 属性组成。next() 方法返回的结果是一个对象，其中包含了当前位置的值和 done 属性，表示是否已经结束。
Async 迭代器，就是迭代异步生成器的一种机制。异步生成器（Async Generator）是一个异步函数，它返回一个异步迭代器。
异步迭代器与普通迭代器的语法几乎相同，但 next() 方法返回一个 Promise 对象。每次调用 next() 方法都会返回一个 Promise，该 Promise 可以在异步数据源返回下一组数据时完成。当数据源已经没有更多数据时，Promise 将被 resolved，并返回一个带有 done 属性的对象。
正是由于有了 Async 迭代器，我们才能够使用异步生成器来处理异步数据源。
为什么它很重要？
因为在异步编程中，您需要等待一个事件完成后才能执行下一个操作。而这个事件的完成时间是不确定的，所以使用异步迭代器非常重要。通过使用 Async 迭代器，您可以很容易地遍历一个异步数据源，而不必担心操作会被阻塞。
从传统的回调函数到 Promise、再到 Async/Await，JavaScript 异步编程范式不断发展，并逐渐演化成适应不同场景的理想工具。Async 迭代器就是这些工具中的一个，它可以大大提高 JavaScript 的异步编程体验。
怎么使用 Async 迭代器？
使用 Async 迭代器就像使用普通迭代器一样简单。只需要在你的迭代器上添加 async 关键字即可。
以下是一个示例代码：
-- -------------------- ---- ------- ----- --------- ----------- - ----- -- ----- -- ----- -- - -- - --------- ----- ------------ -- --- ----- ------ ----- -- ------------ - ------------------- -- -- -- - -
示例中，generator() 函数返回一个异步迭代器，该迭代器包含了三个 yield 语句。然后，我们使用 for-await-of 循环遍历异步迭代器并打印出每个值。
注意，这里的循环不是普通的 for 循环，而是一个 for-await-of 循环，该循环适用于异步迭代器。
如何在实际项目中运用 Async 迭代器？
Async 迭代器可以用于处理许多异步数据源，比如 Node.js 的 TCP 流，WebSockets 连接，或任何遵循异步迭代器和异步生成器协议的东西。如果你正在构建一个需要处理异步操作的应用，例如聊天应用，那么使用 Async 迭代器将会非常有用。
以下是一个使用 Async 迭代器处理聊天消息的示例：
-- -------------------- ---- -------
----- --------- ------------------ -
-- -- --------- --
----- --------- - --- ---------------------------------
-- -- --------- ----
----- --- ----------------- ------- -- -
---------------- - -- -- ----------
----------------- - -------
---
-- --------------
------------------- - ------- -- -
----- ------- - -----------------------
------ ------- -------- ----- -------
-
-- - --------- --------
----- --- --------------- -- -
----------------- - -- -- -
------ ------- ---------- ----- ------
----------
--
---
-
-- -------
--- ----- ------ ------- -- ------------------- -
-- -------
-示例中，messageGenerator() 函数返回一个异步迭代器，该迭代器模拟了一个 WebSocket 连接。当连接打开时，迭代器返回从 WebSockets 收到的每个消息。当连接关闭时，done 属性将被设置为 true，迭代器将停止工作。
在 for await (const message of messageGenerator()) 循环中，我们可以处理每条消息，例如将它们渲染到 UI 上。
结论
Async 迭代器是异步编程的重要工具之一，使我们能够更轻松地处理异步数据源。在实际项目中运用 Async 迭代器是非常有用的，可以为您构建花费巨大的 Web 应用程序提供便利。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6716f876ad1e889fe21edc0e