ES7 中的 for-await-of 语句-JavaScript中文网-JavaScript教程资源分享门户

ES7 中的 for-await-of 语句

在 ES7 中，一个新的关键字 for-await-of 被引入，用于迭代异步生成器中的值。它提供了一种更加优雅的处理异步操作的方式，使其在异步代码中的应用更加方便。本文将详细介绍 for-await-of 的使用方法、注意事项以及示例代码，帮助读者更好地学习和掌握该语句。

1. for-await-of 的基本用法

for-await-of 要与异步迭代器（包括异步生成器）一起使用，在循环中，每次迭代都会等待前面的异步操作完成，然后才进行下一步迭代或结束循环。下面是一个简单的示例，它演示了如何使用 for-await-of 来打印由一个异步生成器生成的值：

// javascriptcn.com 代码示例
async function* generateItems() {
  yield 1;
  yield 2;
  yield 3;
}

(async function() {
  for await (let item of generateItems()) {
    console.log(item);
  }
})();
// 输出：1 2 3

2. 注意事项

在使用 for-await-of 时，需要注意以下几点：

（1）只能在 async 函数中使用

for-await-of 能够正常工作的前提条件是：它必须在 async 函数内部使用。否则，编译器将抛出语法错误。

（2）其迭代器必须是异步迭代器

for-await-of 只能与异步迭代器一起使用，否则程序将编译异常。对于同步迭代器，我们还是需要使用普通的 for-of 循环。

（3）在循环中，前面的异步操作完成后才进行下一步操作

在使用 for-await-of 时，每次迭代都会等待前面的异步操作完成后，才会继续执行下一步迭代。这意味着当一个迭代器的前一个操作还没有完成时，当前的迭代操作将被阻塞。

（4）错误处理

如果一个异步操作在某个迭代中抛出了异常，那么它所属的迭代器将停止迭代，并将异常向下传递。在这种情况下，需要对可能的异常情况进行适当的处理。

3. 示例代码

为了更加深入地理解 for-await-of 的使用方法，我们可以通过以下示例代码来进一步掌握它的使用细节：

// javascriptcn.com 代码示例
async function* generateData() {
  yield Promise.resolve(1);
  yield Promise.resolve(2);
  yield Promise.resolve(3);
}

(async () => {
  try {
    for await (const data of generateData()) {
      console.log(data);
    }
  } catch (err) {
    console.error(err);
  }
})();

上面的代码创建了一个异步生成器 generateData()，它生成了 Promise 对象的序列。然后使用 for-await-of 循环处理 Promise 序列，并打印输出 Promise 解决（resolve）后的值。由于异步操作使用了 Promise，所以要求我们在尝试输出它们的值之前需要等待它们的 resolve() 方法。

4. 总结

在 JavaScript的异步编程中，for-await-of 是一种非常有价值的控制流语句。它可以很好地优化异步任务调度和流控制，让代码更加优雅和简单，为异步编程提供了更多的便利。在使用 for-await-of 语句时，需要注意语句的用法和语义，运用适当的代码结构和逻辑，可以更好地发挥其作用，从而提高代码的质量。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6547a72e7d4982a6eb200a7e