异步编程是现代前端开发中不可或缺的一部分。它让我们能够在不阻塞主线程的情况下执行耗时操作，从而提升了用户体验。在 JavaScript 中，异步编程通常会使用 Promise 和 async/await 这两种方式来实现。
但是，在处理异步迭代的时候，它们并不总是能够满足我们的需求。在 ECMAScript 2018 中，我们已经看到了 for...of 循环的出现，它可以用来遍历可迭代对象。但是，它并不能直接处理异步迭代器，这就限制了它在异步编程中的应用。
好在，ECMAScript 2019 中引入了 for await...of 循环，它可以用来遍历异步迭代器。在本文中，我们将详细介绍 for await...of 的使用方法，并通过示例代码来展示它的优雅之处。
什么是异步迭代器？
在介绍 for await...of 循环之前，我们先来了解一下什么是异步迭代器。
异步迭代器是一种可以异步迭代的迭代器。它通过返回 Promise 对象来实现异步操作。异步迭代器的 next() 方法返回一个 Promise 对象，这个 Promise 对象在迭代器完成下一个元素的操作后被解决。当迭代器没有更多元素时，Promise 对象将被解决并返回一个带有 done 属性的对象。
一个简单的异步迭代器示例：
-- -------------------- ---- -------
----- ------------- - -
------------------------ -
--- - - --
------ -
----- ------ -
-- -- - -- -
----- --- --------------- -- ------------------- -------
------ - ------ ---- ----- ----- --
-
------ - ----- ---- --
-
--
-
--
------ ---------- -
--- ----- ------ --- -- -------------- -
-----------------
-
-----上面的代码定义了一个异步迭代器 asyncIterable，它可以异步迭代三个数字。在 for await...of 循环中，我们使用了 async/await 语法来获取异步迭代器的下一个元素，并将其打印出来。
for await...of 的使用方法
for await...of 循环的语法与 for...of 循环类似，只是在关键字后面加了一个 await 关键字。它可以用来遍历异步迭代器中的元素，以及 Promise.all 等返回 Promise 对象的方法中的元素。
for await...of 循环的语法：
for await (const item of iterable) {
// 执行操作
}其中，iterable 表示一个异步迭代器或返回 Promise 对象的方法。
下面是一个使用 for await...of 循环遍历异步迭代器的示例代码：
-- -------------------- ---- -------
----- ------------- - -
------------------------ -
--- - - --
------ -
----- ------ -
-- -- - -- -
----- --- --------------- -- ------------------- -------
------ - ------ ---- ----- ----- --
-
------ - ----- ---- --
-
--
-
--
------ ---------- -
--- ----- ------ --- -- -------------- -
-----------------
-
-----上面的代码中，我们使用 for await...of 循环遍历了 asyncIterable 异步迭代器中的元素，并将其打印出来。
除了遍历异步迭代器，for await...of 循环还可以用来遍历 Promise.all 等返回 Promise 对象的方法中的元素。下面是一个使用 for await...of 循环遍历 Promise.all 方法返回的 Promise 对象的示例代码：
-- -------------------- ---- -------
----- -------- ---------- -
----- --------- -------- -------- - ----- -------------
----------------------------------------------
------------------------------------------------
------------------------------------------------
---
----- ----- - ----- ---------------
----- ----- - ----- ---------------
----- ----- - ----- ---------------
------ ------- ------ -------
-
------ ---------- -
--- ----- ------ ---- -- ----------- -
-----------------------
-
-----上面的代码中，我们使用 for await...of 循环遍历了 Promise.all 方法返回的 Promise 对象中的元素，并将其打印出来。
for await...of 的优雅之处
for await...of 循环的出现，让我们能够更加优雅地处理异步迭代器。它可以让我们直接在 for...of 循环中使用 async/await 语法，而不需要再手动调用 next() 方法。这样，我们就可以更加专注于业务逻辑的实现，而不需要关注迭代器的具体实现。
下面是一个使用 for await...of 循环处理异步迭代器的示例代码：
-- -------------------- ---- -------
----- --------- ----------------------- ---- -
--- ---- - - ------ - -- ---- ---- -
----- --- --------------- -- ------------------- -------
----- --
-
-
------ ---------- -
--- ----- ------ --- -- ------------------- --- -
-----------------
-
-----上面的代码中，我们使用了 async/await 语法来处理异步迭代器。在 for await...of 循环中，我们直接使用了 generateSequence 方法，而不需要手动调用 next() 方法。这样，我们就可以更加专注于业务逻辑的实现。
总结
在本文中，我们介绍了 ECMAScript 2019 中的 for await...of 循环，它可以用来遍历异步迭代器。我们通过示例代码展示了 for await...of 循环的使用方法和优雅之处。希望本文能够帮助你更加深入地了解异步编程，并在实际开发中应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660a69d7d10417a222a03cb5