ES10 中使用 Async iterator 遍历异步数据流详解

在现代的前端开发中,处理异步数据变得越来越普遍。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