在现代的 Web 开发中，异步操作是无法避免的。JavaScript 语言本身是单线程的，而异步操作可以使得程序在等待 I/O 或网络请求时不会被阻塞，从而提高程序的性能。在 ECMAScript 2018 中，新加入了一个 for await 循环语法，可以方便地处理异步操作。本文将介绍如何使用 for await 循环来处理异步操作。
for await 循环语法
for await 循环是 for...of 循环的异步版本。它可以遍历异步可迭代对象（async iterable），并且可以在每次迭代中等待 Promise 的解决。for await 循环的语法如下：
for await (const item of asyncIterable) {
// 处理 item
}其中，asyncIterable 是一个异步可迭代对象，item 是每次迭代的值。在每次迭代中，for await 循环会等待 Promise 的解决，然后将解决后的值赋给 item。
异步可迭代对象
异步可迭代对象是一个具有 Symbol.asyncIterator 方法的对象。Symbol.asyncIterator 方法返回一个异步迭代器（async iterator），它具有 next 方法，用于异步地返回下一个值。异步迭代器的 next 方法返回一个 Promise，该 Promise 在异步迭代器解决下一个值时解决。
下面是一个简单的异步可迭代对象的示例：
-- -------------------- ---- -------
----- ------------- - -
------------------------ -
--- - - --
------ -
----- ------ -
-- -- - -- -
----- --- --------------- -- ------------------- ------
------ - ------ ---- ----- ----- --
- ---- -
------ - ----- ---- --
-
-
--
-
--该异步可迭代对象会异步地返回数字 0、1、2，每个数字之间间隔 100 毫秒。
使用 for await 循环处理异步操作
使用 for await 循环处理异步操作非常方便。下面是一个使用 for await 循环处理异步可迭代对象的示例：
-- -------------------- ---- -------
----- -------- ------ -
----- ------------- - -
------------------------ -
--- - - --
------ -
----- ------ -
-- -- - -- -
----- --- --------------- -- ------------------- ------
------ - ------ ---- ----- ----- --
- ---- -
------ - ----- ---- --
-
-
--
-
--
--- ----- ------ ---- -- -------------- -
------------------
-
-
-------该示例会输出数字 0、1、2，每个数字之间间隔 100 毫秒。
总结
使用 for await 循环处理异步操作可以方便地遍历异步可迭代对象，并且可以在每次迭代中等待 Promise 的解决。异步可迭代对象是具有 Symbol.asyncIterator 方法的对象，该方法返回一个异步迭代器，用于异步地返回下一个值。在处理异步操作时，我们可以使用 for await 循环来简化代码，提高程序的可读性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c84861add4f0e0ff221a30