在前端开发中，我们经常需要处理异步任务，例如从服务器获取数据、读取文件等。ES6 引入了 Promise 对象，使得异步编程更加容易。但是，当我们需要处理多个异步任务时，我们需要使用 Promise.all 或 Promise.race 等方法来等待所有任务完成。这些方法会等待所有任务完成后才返回结果，这可能会导致长时间的等待。
为了解决这个问题，ES2018 引入了异步迭代器（Async Iterator）的概念。异步迭代器是一个可以异步处理数据的迭代器。ES2021 引入了 for-await-of 循环，可以方便地遍历异步迭代器。本文将介绍如何使用 ES2021 的 for-await-of 循环来处理异步任务。
for-await-of 循环的语法
for-await-of 循环的语法与 for-of 循环类似，但是它可以遍历异步迭代器。其语法如下：
for await (variable of iterable) {
// 循环体
}其中，variable 是变量名，用于存储当前迭代的元素。iterable 是一个异步迭代器，可以是任何实现了异步迭代器接口的对象。
实现异步迭代器
要使用 for-await-of 循环，我们需要实现一个异步迭代器。异步迭代器是一个对象，它必须实现一个名为 Symbol.asyncIterator 的方法，该方法返回一个异步迭代器对象。异步迭代器对象必须实现一个名为 next 的方法，该方法返回一个 Promise 对象，该 Promise 对象的值是一个具有 value 和 done 属性的对象。
下面是一个实现异步迭代器的示例代码：
-- -------------------- ---- -------
----- ------------- - -
------------------------ -
--- - - --
------ -
----- ------ -
-- -- - -- -
----- --- --------------- -- ------------------- -------
------ - ------ ---- ----- ----- --
-
------ - ----- ---- --
-
--
-
--上面的代码实现了一个异步迭代器，它可以返回三个值：0、1 和 2。每次返回一个值时，会等待 1 秒钟。当所有值都返回完毕时，会返回一个 done 属性为 true 的对象。
使用 for-await-of 循环遍历异步迭代器
使用 for-await-of 循环遍历异步迭代器非常简单。下面是一个示例代码：
(async function() {
for await (const value of asyncIterable) {
console.log(value);
}
})();上面的代码会输出 0、1 和 2，每个数字之间间隔 1 秒钟。
for-await-of 循环的指导意义
使用 for-await-of 循环可以方便地遍历异步迭代器，使得异步编程更加容易。我们可以使用异步迭代器来处理一些需要等待多个异步任务完成才能处理的场景，例如读取多个文件、从服务器获取多个数据等。
使用 for-await-of 循环还可以使得代码更加简洁。在以前的版本中，我们需要使用 Promise.all 等方法来等待所有任务完成，这可能会导致代码变得非常复杂。使用 for-await-of 循环，我们可以直接遍历异步迭代器，使得代码更加简洁易读。
结论
本文介绍了如何使用 ES2021 的 for-await-of 循环来处理异步任务。我们首先介绍了 for-await-of 循环的语法，然后实现了一个异步迭代器，并使用 for-await-of 循环遍历了该异步迭代器。最后，我们讨论了 for-await-of 循环的指导意义。使用 for-await-of 循环可以方便地遍历异步迭代器，使得异步编程更加容易，同时使得代码更加简洁易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674641a1f84d1ff10355f876