如何在 ES8 中使用 async 定义一个 Generator 并支持 async+await-JavaScript中文网-JavaScript教程资源分享门户

前言

Generator 是 ES6 中引入的一种新的函数类型，它可以用来控制函数的执行流程，使得函数可以分段执行，也可以在执行过程中暂停并返回中间结果。而 async/await 是 ES8 中引入的新特性，用于简化异步操作的语法。本文将介绍如何在 ES8 中使用 async 定义一个 Generator，并支持 async/await。

基本概念

在开始之前，先来介绍一下一些基本概念。

Generator

Generator 是一种特殊的函数，它可以用来控制函数的执行流程。Generator 函数可以通过 yield 关键字将函数的执行流程暂停，并返回一个中间结果。当再次调用 Generator 函数时，函数会从上一个 yield 关键字所在的位置继续执行。

async/await

async/await 是 ES8 中引入的新特性，用于简化异步操作的语法。通过 async 关键字定义的函数会自动返回一个 Promise 对象，而 await 关键字可以在异步操作完成后将结果返回。使用 async/await 可以让异步代码看起来像同步代码一样，提高代码的可读性和可维护性。

实现方法

在 ES8 中，我们可以使用 async/await 来简化 Generator 函数的调用。具体来说，我们可以使用 async 定义一个 Generator 函数，并在函数中使用 yield 关键字来暂停函数的执行流程。然后，我们可以使用 await 关键字来等待异步操作的完成，并将结果返回给 Generator 函数。最后，我们可以使用 for...of 循环来遍历 Generator 函数的返回值。

下面是一个使用 async/await 定义 Generator 函数的示例代码：

// javascriptcn.com 代码示例
async function* myGenerator() {
  let i = 0;
  while (true) {
    yield i++;
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
}

(async () => {
  for await (let value of myGenerator()) {
    console.log(value);
  }
})();

在这个示例中，我们定义了一个名为 myGenerator 的 Generator 函数。这个函数会无限循环，并在每次循环时返回一个递增的数字。为了模拟异步操作，我们在每次循环中使用了 setTimeout 函数来等待一秒钟。在使用 async/await 定义 Generator 函数时，我们需要在函数名前面加上 async 关键字，并在函数体中使用 yield 关键字来暂停函数的执行流程。在每次循环中，我们使用 await 关键字来等待异步操作的完成，并将结果返回给 Generator 函数。

在我们定义好 Generator 函数之后，我们可以使用 for...of 循环来遍历函数的返回值。在这个示例中，我们使用了一个自执行的 async 函数来执行这个操作。在这个函数中，我们使用了 for await...of 循环来遍历 Generator 函数的返回值，并在每次循环中输出返回值。

总结

在本文中，我们介绍了如何在 ES8 中使用 async 定义一个 Generator，并支持 async/await。通过使用 async/await，我们可以简化 Generator 函数的调用，并让异步代码看起来像同步代码一样。在实际开发中，我们可以使用这种方法来简化异步操作的代码，提高代码的可读性和可维护性。

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