在开发复杂的 web 应用程序时，通常需要使用异步编程技术来处理异步数据流。ES2018 新增了 for-await-of 循环语法，使开发者可以更方便地遍历异步迭代器，从而更轻松地处理异步数据流。
本文将介绍 ES2018 中如何通过 for-await-of 循环遍历异步迭代器，以及如何使用 async 和 await 关键字来简化异步编程。
什么是异步迭代器？
在 ES6 中，我们可以使用迭代器来遍历数组、Map、Set 等数据结构。迭代器是一个对象，它提供了 next() 方法来访问数据集中的下一个元素。当元素全部访问完毕时，next() 方法返回一个包含 value 和 done 属性的对象，其中 value 表示元素的值，done 表示迭代器是否已经访问完全部元素。
异步迭代器是一种特殊的迭代器，它与异步数据流相关。异步迭代器不是立即返回元素值，而是返回一个 Promise 对象，该对象将在某个不确定的时间内解决为一个包含 value 和 done 属性的对象。
例如，异步迭代器可以返回一个 Promise 对象，该对象在异步地从网络加载数据后解析为下一个元素的值。这样，在遍历异步数据流时，我们可以先异步地获取每个元素的值，然后再在 Promise 解决后，让迭代器返回下一个元素。
如何使用 for-await-of 循环遍历异步迭代器
for-await-of 循环与 for-of 循环非常类似，但是它可以用于遍历异步迭代器。for-await-of 循环会在每次迭代时等待 Promise 对象解决后再获取下一个元素的值。
以下是一个使用 for-await-of 循环遍历异步迭代器的示例代码：
-- -------------------- ---- -------
----- -------- ---------------- -
----- -------------------
----- -------------------
----- -------------------
-
----- -------- --------------- -
--- ----- ---- --- -- ----------------- -
-----------------
-
-
----------------在上述示例代码中，我们定义了一个异步生成器函数 asyncGenerator()，该函数返回一个异步迭代器，该迭代器返回三个 Promise 对象：1，2 和 3。我们定义了另一个异步函数 asyncIterator()，该函数通过 for-await-of 循环遍历异步迭代器并打印每个元素的值。
当我们运行 asyncIterator() 函数时，它将打印出以下内容：
1 2 3
我们可以看到，for-await-of 循环会依次等待每个 Promise 对象解决后再打印出它的值。
如何使用 async 和 await 简化异步编程
除了 for-await-of 循环，我们还可以使用 async 和 await 关键字来简化异步编程。async 关键字用于定义异步函数，它返回一个 Promise 对象，该对象在异步执行完成时解决。
await 关键字可以用于在异步函数中暂停执行并等待指定的 Promise 对象解决。使用 await 关键字时，它必须在 async 函数内部使用。
以下是一个使用 async 和 await 关键字简化异步遍历的示例代码：
-- -------------------- ---- -------
----- -------- ---------------- -
----- -------------------
----- -------------------
----- -------------------
-
----- -------- --------------- -
--- ----- ---- --- -- ----------------- -
-----------------
-
-
----- -------- ------ -
----- ----------------
-
-------在上述示例代码中，我们定义了一个 main() 函数，该函数异步地执行 asyncIterator() 函数。在 asyncIterator() 函数中，我们使用 for-await-of 循环遍历异步迭代器并打印每个元素的值。
在 main() 函数中，我们使用 await 关键字等待 asyncIterator() 函数完成执行，从而确保所有异步数据已经被正确处理。
结论
在本文中，我们了解了如何使用 for-await-of 循环和 async/await 关键字来遍历异步数据流。for-await-of 循环是一个很好的工具，可以轻松地遍历异步迭代器。当我们需要更复杂的异步编程时，我们也可以使用 async/await 关键字简化代码的编写。
虽然异步编程可能是一项挑战，但 ES2018 新增的这些功能使我们能够更轻松地处理异步数据流，提高开发效率，这无疑是对前端开发工作者的一大福音！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6774cc266d66e0f9aaf0812f