ES10 之异步迭代器 for-await-of 循环
在 JavaScript 的异步编程中，经常需要循环处理异步数据，例如从服务器获取数据或在浏览器中处理用户输入。ES10 中引入了 for-await-of 循环， 可以处理异步可迭代对象的数据，并使处理异步数据的代码更加简洁易懂。本文将对 for-await-of 循环进行详细介绍并提供示例代码。
异步可迭代对象
在介绍 for-await-of 循环之前，我们需要了解异步可迭代对象。 异步可迭代对象允许我们在代码执行中暂停，等待异步数据生成，然后继续执行代码。 它是一个包含异步数据的迭代器，可以通过 next() 方法获取异步数据。为了使一个对象成为异步可迭代对象，需要实现 Symbol.asyncIterator 方法，该方法返回一个异步迭代器。下面是一个简单的异步可迭代对象示例：
----- ----- - ------ -- --- --------------- -- ------------------- ------
----- ------------------- - -
----- ------------------------- -
----- ----- -----------
----- ----- -----------
----- ----- -----------
-
-异步迭代器
异步迭代器提供了一种方法，用于能够进行异步迭代的异步可迭代对象的迭代器。 它带有一个异步 next() 方法，用于获取异步可迭代对象的数据。 与同步迭代器不同，异步迭代器返回的结果是一个 Promise 对象，该 Promise 对象表示异步数据。 下面是一个简单的异步迭代器示例：
----- ----- - ------ -- --- --------------- -- ------------------- ------
----- ------------- - -
-------- --
----- ------ -
----- -----------
--------------
------ - ----- ------ ------ ------------ -
-
-for-await-of 循环
for-await-of 循环可以用来循环异步可迭代对象提供的异步数据。 它与传统的 for...of 循环类似，但是它可以暂停代码，等待异步数据生成后继续执行。 下面是一个使用 for-await-of 循环的示例，用于遍历上面定义的异步可迭代对象 asyncIterableObject。
----- ----- - ------ -- --- --------------- -- ------------------- ------
----- ------------------- - -
----- ------------------------- -
----- ----- -----------
----- ----- -----------
----- ----- -----------
-
-
----- -------- ------ -
--- ----- ------ ----- -- -------------------- -
------------------
-
-
------ -- -- - - -在上面的示例中， for-await-of 循环正确地等待异步数据生成，在每次获取数据后执行循环体。 循环体对 value 进行打印，这里的 value 是异步可迭代对象生成的数据。
指导意义
使用 for-await-of 循环可以使处理异步数据的代码更加简洁易懂。 它也可以用于处理许多常见的异步任务，例如在浏览器中使用 fetch() 方法获取数据。 使用 for-await-of 循环，可以使用常规的逻辑编写代码，而不需要使用复杂的回调或 Promise 链。
结论
ES10 中的 for-await-of 循环提供了一种新的方式，让我们更加容易处理异步数据。它允许我们使用常规代码逻辑而不是回调或 Promise 链。本文提供了简单的示例代码来演示异步可迭代对象、异步迭代器和 for-await-of 循环，希望本文可以对读者在以后的异步编程中提供帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6707cc8ad91dce0dc86c978a