在现代的前端开发中,处理异步数据变得越来越普遍。ES10 中引入的 Async iterator 可以为我们管理异步数据流提供很大的帮助。本文将详细探讨 ES10 中使用 Async iterator 遍历异步数据流所需的知识。
异步 iterator 和 Async iterator
在介绍 Async iterator 之前,我们需要先了解异步 iterator。
异步 iterator 是一种能够逐步异步取出值的对象。异步 iterator 在异步代码挂起时,可以通过一个 Promise 实例来持续返回值。
ES6 的代码可以这样使用异步 iterator:
----- -------- -------- - ----- --------------- - ----------------------------- -------- ------------ ----- ------------- - --------------------------------------- ----------------- --------------------- ----------------- --------------------- ----------------- --------------------- ----------------- --------------------- - --------
异步 iterator 的输出结果是:
- ------ -------- ----- ----- - - ------ -------- ----- ----- - - ------ ----------- ----- ----- - - ------ ---------- ----- ---- -
Async iterator 在 ES10 中被引入。它是一种返回异步 iterator 的对象(通过一个 [Symbol.asyncIterator]()
方法),可以帮助我们更方便地处理异步数据流。
Async generator 函数
async function*
是 JavaScript 中的新语法,用于声明 Async generator 函数。 Async generator 函数仅仅是返回一个 Async iterator,具体来说,就是一个包含一系列 Promise 的对象,可以在异步上下文中进行逐步遍历。
Async generator 函数的代码结构如下所示:
----- --------- ------------------- - -- --- ----- ----- -------------------- -- --- -
上面的代码中,我们可以看到 generateAsyncData
函数返回了一个 Async iterator,并且在内部使用了 yield
关键字来提供需要逐个 Promise 的值。
生成的 Async iterator 可以使用 for await...of
来遍历其中的值。
Async iterator 和 for await...of 循环
通过 for await...of
循环,异步数据流可以被逐个轮询或化解。for await...of
循环通过持续调用异步 iterator 的 .next()
方法来实现。
下面是示例代码:
----- -------- ------------------ - ----- ------------- - ----------------------------- -------- ------------ --- ----- ------ ---- -- -------------- - ----------------- - - ------------------
上面的示例代码中,我们定义了一个函数来消费异步数据流并在控制台上输出它们。
示例代码
下面是一个完整的使用 Async iterator 的示例代码,它可以将从异步 URL 加载的 HTML 数据流转换为对象数组,并在控制台上输出它们:
----- --------- ----------- - ----- ---- - ----------------------- --------------------- --------------------- --- ------ --- -- ----- - ----- ------------------- -- ----------- - - ----- -------- ----------- - ----- ------- - -- --- ----- ------ ---- -- ------------ - ----- ------ - --- ----------- ----- --- - ---------------------------- ------------ ----- ----- - -------------------------------------- -------------- ---- --------- ----- -- - -------------------- - -----------
上面的代码中,fetchURLs
函数返回一个包含一系列 Promise 的 Async iterator。在 parseHTML
函数中,使用 for await...of
循环从 fetchURLs
中获取每个 Promise 的值,将其解析为对象,并将其添加到 results
数组中。
结论
ES10 中的 Async iterator 可以帮助我们更方便地从异步数据源中检索数据。它的主要优势是可以以异步的方式返回值,并能够使用 for await...of
循环模式来精确控制异步数据流。理解和掌握这些技能,将有助于提高我们开发异步数据流应用程序的能力和技术水平。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6717c547ad1e889fe22395d7