JavaScript 中的 await 和 yield 关键字有什么区别？

在 JavaScript 中，await 和 yield 关键字都涉及到异步编程，但它们的具体实现和用法有所不同。本文将详细介绍这两个关键字的区别。

yield 关键字

yield 关键字主要用于生成器函数中，它的作用是将代码执行暂停并把结果返回给调用者。当生成器函数再次被调用时，它会从上一次暂停的地方继续执行。

举个例子，下面是一个使用 yield 的简单生成器函数，它每次调用时都会返回一个递增的数字：

function* incrementGenerator() {
  let i = 0;
  while (true) {
    yield i++;
  }
}
const generator = incrementGenerator();
console.log(generator.next().value); // 输出 0
console.log(generator.next().value); // 输出 1
console.log(generator.next().value); // 输出 2

在上面的例子中，incrementGenerator 函数定义了一个无限循环，每次返回 i++ 的值。当我们通过调用 incrementGenerator() 来获取生成器实例时，我们可以通过调用 next() 方法来访问生成器的下一个值。

await 关键字

await 关键字主要用于异步函数中，它的作用是等待一个 Promise 对象执行完毕并返回 Promise 对象的结果。当 Promise 对象成功完成时，await 关键字会返回 Promise 对象的 resolve 值；当 Promise 对象失败时，await 会抛出 Promise 对象的 reject 异常。

举个例子，下面是一个包含异步操作的简单函数，我们将使用 await 来等待异步操作执行结果：

function wait(time) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(time);
    }, time);
  });
}
async function waitAndPrint(time) {
  const result = await wait(time);
  console.log(result);
}
waitAndPrint(1000);

在上面的例子中，waitAndPrint 函数使用了 async 关键字来表示它是一个异步函数。其中，wait 函数返回一个 Promise 对象，它会在 time 毫秒后调用 resolve 方法来结束 Promise 的执行。在 waitAndPrint 函数中，我们使用 await 来等待 wait 函数的执行结果，并将结果赋值给 result。最后，我们将结果打印到控制台上。

需要注意的是，await 关键字只能用于异步函数中，所以在使用 await 时，我们必须将其包裹在 async 函数中。

区别总结

yield 和 await 关键字都能用于将代码的执行暂停，并返回一个值。但它们用于不同的语法结构中，yield 主要用于生成器函数中，await 主要用于异步函数中。此外，yield 可以用来生成多个值，而 await 只能返回一个 Promise 对象的执行结果。在使用这两个关键字时，需要注意它们的用法和限制，以免出现错误。