使用 ECMAScript 2019 中的 for await...of 解决并行遍历异步操作的问题

在前端开发中,异步操作是必不可少的一部分。尤其是在处理大量数据或者请求多个接口时,无法避免要进行异步操作。然而,当需要并行遍历多个异步操作时,原本简单的代码变得复杂难以维护。这时候,ECMAScript 2019 中的 for await…of 循环就能够派上用场。

为什么需要 for await...of?

在使用异步操作的时候,我们通常通过 Promise.all() 方法实现并行操作,并等待所有异步完成之后再进行下一步操作。例如:

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

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

然而,在遍历异步操作时,Promise.all() 方法就无法满足我们的需求了。例如,我们需要同时遍历多个数组并进行相关操作:

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

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

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

上面的代码中,我们将两个数组中的每个元素都进行了异步操作,并将结果存储在 result1 和 result2 中。然后通过 for 循环遍历并输出相加后的结果。

这种方式很明显会增加代码的复杂度和重复性。更重要的是,在遍历数组时,我们每次都需要对其进行 await 操作,导致整个遍历操作变得非常低效。

这时候,我们就需要使用 ECMAScript 2019 中的 for await...of 语法。

for await...of 的用法

for await...of 语法用于遍历异步操作返回的对象。它的语法和 for…of 非常相似,只是多了一个 await 关键字:

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

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

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

上面的代码中,我们使用了 for await...of 循环遍历了一个包含三个 Promise 的数组,并依次输出了每个 Promise 的结果。需要注意的是,在循环中我们使用了 await 关键字来获取异步操作的结果。

如果要遍历多个异步操作的结果并进行相关操作,我们可以将异步操作的返回值封装到一个异步迭代器中,然后通过 for await...of 循环遍历并操作它们:

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

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

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

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

上面的代码中,我们将 arr1 和 arr2 中的 Promise 封装到一个异步迭代器中,并通过 for await...of 循环遍历了整个迭代器并输出了 Promise 的结果。

可以看出,使用 for await...of 循环处理多个异步操作的返回值,代码会变得更加简洁和易于维护。

使用 for await...of 解决并行遍历异步操作的实例

下面我们来看一个实际的例子:在 Node.js 中使用 for await...of 循环从多个 URL 中获取与搜索词相关联的 HTML。

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

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

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

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

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

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

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

上面的代码中,我们使用 for await...of 循环并行遍历了多个 URL,并通过 fetchHTML() 函数获取了 HTML 内容。需要注意的是,在遍历多个 URL 的时候,我们使用了异步迭代器来封装多个 Promise,并使用了 await 关键字来获取 Promise 的返回值。

结论

在 ECMAScript 2019 中,for await...of 循环为我们处理多个异步操作返回的对象提供了非常便捷的方法。通过使用异步迭代器和 await 关键字,我们可以轻松地处理异步操作并行遍历的问题,使代码更加简洁和高效。

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