随着 Web 应用的不断发展，JavaScript 语言的重要性逐渐增强。作为现代 Web 应用的核心技术之一，前端开发也越来越受到人们的关注。而 ECMAScript 2018 (简称 ES2018) 的推出，标志着 JavaScript 语言又向更加先进的方向迈进了一步。其中，异步迭代器是 ES2018 的一项重要改进，在前端开发中具有广泛的应用。
什么是异步迭代器
在传统的 JavaScript 中，我们通常通过 for 循环、forEach 方法等方式来遍历数组，或者通过 for...in、Object.keys 方法来遍历对象。而在 ES2015 引入的迭代器协议中，我们可以通过实现 Iterable 接口来让一个对象变成可遍历的。
异步迭代器是在迭代器协议的基础之上，支持异步操作的迭代器实现。它通过 AsyncIterator 接口来实现，包含一个 next 方法，返回一个 Promise 对象，用于异步获取迭代器下一个值。具体来说，异步迭代器中的 next 方法返回的 Promise 对象，在下一个值就绪时 resolve，同时在没有更多可迭代元素时，reject 一个具有 EOF 属性的对象，表示迭代已完成。
如何使用异步迭代器
我们可以使用 for-await-of 循环来遍历异步迭代器中的值。该循环与传统的 for...of 循环类似，但在遇到 Promise 对象时，会自动等待其 resolve。以下是一个简单的示例：
-- -------------------- ---- -------
----- -------- --------- -
------ --- --------------- -- ------------------- -----
-
----- --------- ---------------- -
----- ----- ------------
----- ----- ------------
----- ----- ------------
-
------ ---------- -
--- ----- ------ ----- -- ----------------- -
-------------------
-
-----在上述示例中，我们定义了一个异步生成器 asyncGenerator，每次迭代返回一个 Promise 对象，等待一段时间后 resolve 一个值。我们可以通过 for-await-of 循环来遍历这个异步迭代器中的所有值，并在控制台输出每个值。由于循环自动等待 Promise 对象的 resolve，在输出完所有值后程序才会退出，保证了异步操作的完整性。
异步迭代器的应用场景
异步迭代器具有很广泛的应用场景，尤其是在前端开发中。例如，我们可以使用异步迭代器来遍历服务器端推送的消息，实现实时通信功能。以下是一个简单的示例：
-- -------------------- ---- -------
----- --------- ------------------ -
----- -- - --- ---------------------------------
------------ - --- -- -
----- ---------
--
-
------ ---------- -
--- ----- ------ ------- -- ------------------- -
---------------------
-
-----在上述示例中，我们定义了一个异步生成器 messageGenerator，用于遍历服务器发来的消息。该生成器在初始化时建立 WebSocket 连接，当服务器推送消息时，自动返回一个 Promise 对象，等待消息到达后 resolve。我们可以通过 for-await-of 循环来遍历这些消息，实现实时通信的功能。
总结
异步迭代器是 ES2018 新增的重要特性，为前端开发提供了很多方便。通过实现 AsyncIterator 接口，并使用 for-await-of 循环遍历异步迭代器，我们可以实现很多常用的异步操作。例如，遍历服务器发来的消息，实现实时通信功能等。在以后的开发中，我们应当充分利用异步迭代器的优势，提高代码的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c54966d20074f47a462081