如何使用 ES12 的 for-await-of 来处理异步 Iterable

随着前端应用变得越来越复杂,异步编程(asynchronous programming)已成为非常重要的一部分,但在使用 Promise、async/await 等异步编程技术时也会遇到一些问题,例如 Promise.all() 和 Promise.race() 方法只处理 Promise 实例,而很难处理多个异步迭代器,此时 for-await-of 很好地解决了这个问题。

ES2018 推出的 for-await-of 允许我们处理异步可迭代对象(async iterable),它是在 for-of 循环基础上升级而来,可以在循环中使用 await 关键字来处理异步迭代器中的返回值,这极大地简化了代码语法,提高了可读性和可维护性。

什么是异步 Iterable?

在学习 for-await-of 之前,我们需要了解异步迭代器(async iterator),它是同时满足以下两个条件的迭代器:

  1. 它是一个迭代器,实现了 next() 方法,返回包含 value 和 done 属性的对象。
  2. 它指示下一个元素何时可用,即 next() 方法返回一个 Promise,而不是立即返回。

异步迭代器可以使用 Symbol.asyncIterator 方法来定义。以下是示例代码:

----- ------------- - -
  ------------------------ -
    --- - - --
    ------ -
      ----- ------ -
        -- -- - -- -
          ----- --- --------------- -- ------------------- -------
          ------ - ------ ---- ----- ----- --
        -
        ------ - ----- ---- --
      -
    --
  -
--

在上面的代码中,我们用 Symbol.asyncIterator 方法返回了一个迭代器对象,实现 next() 方法,并在每个执行周期之间等待 1 秒钟。

for-await-of 使用方法

与传统的 for-of 循环语法类似,for-await-of 提供了一种遍历异步迭代器的语法。以下是示例代码:

----- -------- ----- -
  --- ----- ---- ----- -- -------------- -
    -------------------
  -
-
------

在上面的代码中,使用 for-await-of 语句来遍历 asyncIterable。因为 asyncIterable 迭代器是异步的,所以我们使用了 async function 来包装整个 for-await-of 循环。使用 await 关键字使我们可以在每个完成的循环周期中访问 value 变量。

示例

让我们使用 for-await-of 迭代器来处理异步可迭代对象(异步 Generator)的实际案例。

假设我们有一个数组,其中每个元素都是一个 Promise 对象,而实际的值只能通过异步获取。如果我们要访问数组中的所有值,就需要等到所有 Promise 都完成,而且顺序不能错。

以下是示例代码:

----- -------- - -
  --- --------------- -- ------------- -- --------------- -------
  --- --------------- -- ------------- -- --------------- -------
  --- --------------- -- ------------- -- ----------------- ------
--

----- -------- ----- -
  --- ----- ---- ----- -- --------- -
    -------------------
  -
-
------

在上面的代码中,我们创建了一个仅包含 Promise 对象的数组,并使用 for-await-of 语句来访问它们。每个 Promise 对象使用 setTimeout 模拟异步获取。使用 for-await-of 可以确保在所有 Promise 对象都被解决之前,不会访问打印值。

结论

使用 for-await-of 可以简化处理异步迭代器的代码语法,并使代码更具可读性和可维护性。在处理 Promise、异步 Generator 等异步可迭代对象时,for-await-of 可以轻松地帮助我们处理异步返回值,让代码更加清晰明了。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/66fd9c0344713626017fbbc3