随着 JavaScript 语言的发展，ES9 新增了一个重要的特性 - for-await-of 循环。它可以极大地简化异步操作的处理流程，提高代码的可读性和可维护性。
本篇文章将深入讲解 for-await-of 循环的用法和实现原理，让读者全面了解这个新特性，以便更好地使用它进行前端开发。
什么是 for-await-of 循环
for-await-of 循环是在 ES9 中引入的新的迭代器协议。它允许在异步可迭代对象上进行迭代，比如 async 函数和 Promise。 这意味着我们可以像循环同步代码一样循环异步代码，而不需要在代码中嵌套回调函数。
通过 for-await-of 循环，我们可以编写可读性更高的代码，并且不会阻塞事件循环。
下面是一个简单的示例，展示了 for-await-of 循环如何遍历异步可迭代对象中的数据：
-- -------------------- ---- -------
----- -------- --------- -
----- ---- - --- -- -- -- ---
--- ----- ---- ----- -- ----- -
-------------------
-
-
----------在这个示例中，我们定义了一个 async 函数 getData，它返回一个带有五个数据项（1，2，3，4，5）的数组。然后我们使用 for-await-of 循环，在异步上下文中遍历该数组。
这个示例可能很简单，但它展示了 for-await-of 循环的基本原理和用法。
for-await-of 循环与 for-of 循环的区别
for-await-of 循环和 for-of 循环非常相似，但是它们有一些重要的区别。
- for-await-of 循环只能用于遍历异步可迭代对象，如 async 函数和 Promise。
- for-of 循环可以用于遍历同步可迭代对象，如数组、Map、Set等。
- for-await-of 循环可以像普通的 for 循环一样使用 break 和 continue 关键字来控制循环的流程。
- for-await-of 循环在每次迭代中都会等待 Promise 返回结果，因此它可以自动处理每个 Promise 并等待它们的解析。
for-await-of 循环的实现原理
为了深入理解 for-await-of 循环是如何工作的，我们需要关注它的实现原理和后台逻辑。
它最主要的原理是使用了迭代器协议。当我们在异步迭代器上使用 for-await-of 循环时，JavaScript 引擎会调用该异步迭代器的 next() 方法。
这个 next() 方法返回一个 Promise 对象。当 Promise 对象解析时，它将返回一个带有具有值和完成状态的对象。这个返回对象会被 for-await-of 循环解析，并通过变量获取其中的值。
如果 Promise 对象被拒绝，for-await-of 循环将抛出一个错误，并停止迭代异步迭代器。
因此，使用 for-await-of 循环时，JavaScript 引擎会自动等待异步 Promise 执行完成，然后在每次迭代中更新变量。
for-await-of 循环的应用场景
for-await-of 循环主要用于处理异步操作，例如 Promise 和 async 函数。
当我们需要同时执行多个异步操作时，for-await-of 循环可以帮助我们同时迭代多个 Promise 对象，并等待它们全部解析后再进行下一步操作。
此外，for-await-of 循环还可以用于处理事件循环的异步操作，例如延迟、定时器和请求轮询。
下面是一个基于 Promise 的示例，展示了如何使用 for-await-of 循环来同时处理多个异步任务：
-- -------------------- ---- -------
----- -------- ----------------- -
----- ---- - --------------------------------- -------------------------------- ---------------------------------
----- -------- - ------------ -- ------------
--- ----- ---- -------- -- --------- -
----- ---- - ----- ----------------
------------------
-
-
------------------在这个示例中，我们定义了一个 async 函数 getMultipleData，它包含三个不同的 fetch() 调用，每个调用返回一个 Promise 对象。
然后我们使用 for-await-of 循环来同时处理三个 Promise 对象，每当其中一个 Promise 被解析时，我们使用 await 关键字来提取其响应数据。然后我们将数据打印到控制台上。
总结
在本文中，我们对 ES9 中新增的 for-await-of 循环进行了详细的讲解。
我们学习了 for-await-of 循环的基本用法和实现原理，并且了解了它主要的应用场景。
使用 for-await-of 循环可以使异步编程更加容易和可读，因此在你的项目中尝试使用它吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646fd022968c7c53b0e09971