在前端开发中,异步操作是必不可少的一部分。尤其是在处理大量数据或者请求多个接口时,无法避免要进行异步操作。然而,当需要并行遍历多个异步操作时,原本简单的代码变得复杂难以维护。这时候,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