前言
在前端开发中，异步操作是必不可少的。而异步操作的循环也同样重要，它可以让我们在遇到需要等待响应时，持续执行某段代码。
JavaScript 的异步操作主要有两种方式：回调函数和 Promise 对象。不过，在 ES10 中，它给我们带来了一个全新的异步循环方式：for await...of。
在本篇文章中，我们将探讨如何使用 ES10 与 JavaScript 实现异步循环。
传统的异步循环方式
在 ES10 出现之前，异步操作的循环通常采用以下两种方式：
回调函数
回调函数是 JavaScript 中常用的异步操作方式。在循环响应中，我们通常使用递归的方式实现回调函数。下面是一个基于回调函数的异步循环实例：
-- -------------------- ---- -------
-------- ------------------- ------ -
-- ------ -- -- -
------ -----------
-
--------------------- -
-------------------
------------------- ----- - ---
-- ------
-
-------------------- -
------------------ ---- ------------
-- ---Promise
Promise 对象是 ES6 新增的异步操作方式。在循环响应中，我们通常使用 Promise.all 方法将多个 Promise 对象组合在一起。下面是一个基于 Promise 的异步循环实例：
-- -------------------- ---- -------
--- -------- - ---
------- - - -- - - -- ---- -
--- ------- - --- ----------------- ------- -- -
------------- -- -
---------------
----------
-- ------
---
-----------------------
--
----------------------------- -- -
------------------ ---- ------------
---ES10 中的异步循环
在 ES10 中，有一个新的关键字 for await...of，它能够轻松地实现异步循环操作。它的一般语法如下：
for await (const x of iterable) {
...
}这个语法与 for...of 的语法非常类似，唯一的区别是 for await...of 循环中的 iterable 必须是一个异步迭代器（Async Iterator）。
异步迭代器
异步迭代器是一个迭代器，它异步地返回数据。它是 ES10 中非常强大的一个功能，可以让我们迭代异步数据。异步迭代器最常用的应用场景就是异步调用 API 以及读写文件。
异步迭代器必须实现 Symbol.asyncIterator 方法并返回一个异步迭代器对象。异步迭代器对象需要实现 next 方法和 return 方法。
下面是一个异步迭代器的基本实例：
-- -------------------- ---- -------
----- ------------- - -
----------------------- ----- --------- -- -
----- -------------------
----- -------------------
----- -------------------
-
--
------ ---------- -
--- ----- ------ - -- -------------- -
---------------
-
-----
-- ---
-- ---
-- ---在这个例子中，[Symbol.asyncIterator] 方法返回一个异步迭代器对象，它通过 yield 语句返回了一些 Promise 对象。
使用异步迭代器实现异步循环
有了异步迭代器的概念，我们可以使用它来实现异步循环了。下面是一个使用异步迭代器实现异步循环的例子：
-- -------------------- ---- -------
----- ----- - ---- -- --- --------------- -- ------------------- -----
----- --------- -------------- -
----- ----- ------------
----- ----- ------------
----- ----- ------------
-
------ ---------- -
--- ----- ------ - -- --------------- -
--------------- --------------------- ---
-
-----在这个例子中，asyncNumbers 函数通过 yield 语句返回了几个异步操作。而在循环响应中，我们使用 for await...of 循环来遍历这个异步迭代器。
总结
在本文中，我们探讨了异步操作的循环方式。从传统的回调函数和 Promise 对象，到 ES10 中的 for await...of 循环方式，我们一一介绍了它们的使用方法。
在实际开发中，我们可以根据具体的场景来选择合适的异步循环方式。总的来说，ES10 中的 for await...of 循环方式可以让我们更加轻松地实现异步操作的循环。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64585b2b968c7c53b0abdb29