在现代的前端开发中，处理异步数据变得越来越普遍。ES10 中引入的 Async iterator 可以为我们管理异步数据流提供很大的帮助。本文将详细探讨 ES10 中使用 Async iterator 遍历异步数据流所需的知识。
异步 iterator 和 Async iterator
在介绍 Async iterator 之前，我们需要先了解异步 iterator。
异步 iterator 是一种能够逐步异步取出值的对象。异步 iterator 在异步代码挂起时，可以通过一个 Promise 实例来持续返回值。
ES6 的代码可以这样使用异步 iterator：
-- -------------------- ---- ------- ----- -------- -------- - ----- --------------- - ----------------------------- -------- ------------ ----- ------------- - --------------------------------------- ----------------- --------------------- ----------------- --------------------- ----------------- --------------------- ----------------- --------------------- - --------
异步 iterator 的输出结果是：
{ value: 'hello', done: false }
{ value: 'async', done: false }
{ value: 'iterator', done: false }
{ value: undefined, done: true }Async iterator 在 ES10 中被引入。它是一种返回异步 iterator 的对象（通过一个 [Symbol.asyncIterator]() 方法），可以帮助我们更方便地处理异步数据流。
Async generator 函数
async function* 是 JavaScript 中的新语法，用于声明 Async generator 函数。 Async generator 函数仅仅是返回一个 Async iterator，具体来说，就是一个包含一系列 Promise 的对象，可以在异步上下文中进行逐步遍历。
Async generator 函数的代码结构如下所示：
async function* generateAsyncData() {
// ...
yield await Promise.resolve('1')
// ...
}上面的代码中，我们可以看到 generateAsyncData 函数返回了一个 Async iterator，并且在内部使用了 yield 关键字来提供需要逐个 Promise 的值。
生成的 Async iterator 可以使用 for await...of 来遍历其中的值。
Async iterator 和 for await...of 循环
通过 for await...of 循环，异步数据流可以被逐个轮询或化解。for await...of 循环通过持续调用异步 iterator 的 .next() 方法来实现。
下面是示例代码：
async function consumeAsyncData() {
const asyncIterable = createAsyncIterable(['hello', 'async', 'iterator'])
for await (const data of asyncIterable) {
console.log(data)
}
}
consumeAsyncData()上面的示例代码中，我们定义了一个函数来消费异步数据流并在控制台上输出它们。
示例代码
下面是一个完整的使用 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