在 ES10 中优雅地使用循环迭代器（for await...of）
在传统的 JavaScript 中，我们常常使用 for 循环来遍历数组和对象。但当我们在使用异步编程时，循环迭代器就变得非常重要。在 ES10 中，出现了一个新的循环迭代器（for await...of）来简化异步编程。本文将详细介绍 for await...of 循环迭代器以及如何使用它来优雅地处理异步任务。
基本语法
for await...of 循环迭代器的基本语法与传统的 for...of 循环迭代器相同，只是前者使用了 await 关键字。以下是基本语法：
async function iterateAsync(iterable) {
for await (const value of iterable) {
// 在此处编写异步代码
}
}在上面的代码中，iterateAsync 函数使用 for await...of 循环迭代器来遍历异步迭代器，并在每个值处执行异步任务。
异步迭代器
异步迭代器是支持异步操作的迭代器。在循环迭代器中，异步迭代器返回一个异步对象，该对象在每次迭代时被解析。为了遍历异步迭代器，我们可以使用 for await...of 循环迭代器。
以下是一个异步迭代器的示例代码：
-- -------------------- ---- -------
----- --------- ---------------- -
--- - - --
----- -- - -- -
----- --- --------------- -- ------------------- ------
----- ----
-
-
----- ------------- - -----------------
------ ---------- -
--- ----- ------ ----- -- -------------- -
-------------------
-
-----在上面的代码中，我们定义一个名为 asyncGenerator 的异步迭代器，并在其中使用了一个循环语句来生成数据。在每个值处，我们使用了一个 Promise 来模拟耗时的异步任务，并使用 yield 语句来暂停迭代器。最后，我们使用 for await...of 循环迭代器来遍历这个异步迭代器。
错误处理
在异步编程中，错误处理是非常重要的。在 for await...of 循环迭代器中，我们可以使用 try...catch 语句来处理异步任务中的错误。以下是示例代码：
-- -------------------- ---- -------
----- --------- ------------------------- -
--- - - --
----- -- - -- -
----- --- ----------------- ------- -- -
-- -- --- -- -
------------- -----------
- ---- -
------------------- -----
-
---
----- ----
-
-
----- ---------------------- - --------------------------
------ ---------- -
--- ----- ------ ----- -- ----------------------- -
-------------------
-
-------------- -- --------------------在上面的代码中，我们定义了一个名为 asyncGeneratorWithError 的异步迭代器，并在其中使用了一个循环语句来生成数据。在每个值处，我们使用了一个 Promise 来模拟异步任务，并使用 yield 语句来暂停迭代器。当 i 的值等于 2 时，我们拒绝 Promise 并抛出一个错误。最后，我们使用 for await...of 循环迭代器来遍历这个异步迭代器，并使用 try...catch 语句来捕获异常。
结论
在 ES10 中，for await...of 循环迭代器为异步编程带来了更多的优雅性和可读性。在编写异步任务时，我们应该利用其提供的简洁的语法和错误处理机制，以提高代码的稳定性和易读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674f8a46e884a3e30f2e9e93