在现代的前端开发中，异步编程是必不可少的一部分。虽然 Promise 和 async/await 可以简化异步操作，但在处理某些情况时仍存在一定的限制。ES11 中引入了 for-await...of 方法，可以更加轻松地处理异步编程问题。
for-await...of 简介
for-await...of 是一个新的异步迭代器，它可以处理 Promise 和基于异步生成器的异步操作。它的用法与 for...of 类似，但是它允许在迭代时处理异步操作。示例代码如下：
-- -------------------- ---- -------
----- -------- ----------- -
----- ------------- - ------------------------- ------
--- ----- ------ ---- -- -------------- -
------------------
-
-
----- --------- ----------------------------- -
--- ------ ---- -- --------- -
----- ----------------------
-
-在上面的代码中，createAsyncIterable 函数返回一个异步生成器，它将迭代器中的每个值转换为 Promise。然后使用 for-await...of 迭代异步迭代器 asyncIterable，当每个 Promise 解析时，它会打印出它的值。
处理异步任务队列
使用 for-await...of 可以更加方便地处理异步任务队列，因为它可以处理 Promise 和异步生成器。例如，如果你想执行多个 Promise，你可以使用 Promise.all 方法并将 Promise 数组作为参数传递。然而，如果 Promise 数组包含未知数量的 Promise，那么使用 for-await...of 方法就更加合适。示例代码如下：
async function asyncFunc() {
const promises = [Promise.resolve('a'), Promise.resolve('b'), Promise.resolve('c')];
for await (const response of promises) {
console.log(response);
}
}在上面的代码中，我们将 Promise 数组作为参数传递给 for-await...of 方法，并使用 await 关键字在迭代过程中等待每个 Promise 的解析。
处理可读流
可读流是一种生产者-消费者设计模式，它允许以流式方式处理数据。在传统的 Node.js 环境中，可以使用 Stream API 处理可读流。但是在浏览器环境中，该 API 并不适用。ES11 中引入了 for-await...of 方法，可以处理通过 AsyncIterable 或 AsyncIterator 接口提供的可读流。
-- -------------------- ---- -------
----- -------- ----------- -
----- -------- - ----- -------------------------------------
----- ---- - ----- ----------------
----- ----- - -----------------
----- ------------- - ---------------------------
--- ----- ------ ---- -- -------------- -
------------------
-
-
----- --------- -------------------------- -
--- ------ ---- -- ------ -
----- ----- ----------------------
-
-在上面的代码中，我们使用 fetch API 下载文本文件，将其分割为行，并使用 createAsyncIterable 函数将行转换为异步生成器。然后，我们使用 for-await...of 迭代异步生成器并打印每一行。通过异步迭代器的使用，我们可以轻松处理可读流，而不必使用 Stream API。
总结
for-await...of 方法是处理异步编程问题的有力工具。它可以处理 Promise 和异步生成器，并使处理异步任务队列和可读流变得更加简便。在编写现代 JavaScript 应用程序时，你应该考虑使用 for-await...of 方法来解决异步编程问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649befdb48841e98948b314a