ES9 中的异步生成器解析及其示例代码-JavaScript中文网-JavaScript教程资源分享门户

异步生成器是 ES9 中的一项新特性，它结合了异步函数和生成器的概念，使得开发者可以更加方便地进行异步编程。在本文中，我们将深入探讨 ES9 中的异步生成器，并提供一些示例代码以帮助读者更好地理解它们的使用。

异步函数和生成器的概述

在讲解异步生成器之前，我们先来简单了解一下异步函数和生成器的基本概念。

异步函数

异步函数是一种特殊的函数，它会返回一个 Promise 对象，可以让开发者方便地处理异步操作。异步函数可以使用 async 关键字来声明，以及 await 关键字来等待 Promise 对象的执行结果。

以下是一个异步函数的例子：

// javascriptcn.com 代码示例
async function getUserInfo() {
  const response = await fetch('/api/userinfo');
  const data = await response.json();
  return data;
}

getUserInfo().then(data => {
  console.log(data);
});

在这个例子中，我们首先使用 fetch() 函数发起了一个 http 请求，返回的结果是一个 Promise 对象。之后，我们使用 await 关键字等待 Promise 对象的执行结果，并将其分别赋值给 response 和 data 变量。最后，我们将 data 变量作为异步函数的返回值，以供外部调用。当获取到异步函数的返回值后，我们在外部使用 then() 方法来处理它。

生成器

生成器是一种用于生成迭代器对象的函数，我们可以通过对迭代器对象的迭代来获取它的值。在生成器函数中，我们可以使用 yield 关键字来暂停函数的执行并返回一个值，之后可以通过 next() 方法调用生成器函数，继续执行到下一个 yield 关键字为止。这样，我们就可以在函数执行过程中，暂停并在任意时刻返回一个值，从而实现灵活的逻辑控制。

以下是一个生成器函数的例子：

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

const gen = getNumbers();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

在这个例子中，我们定义了一个生成器函数 getNumbers()，其中使用了三个 yield 关键字来暂停函数的执行并返回一个值。之后，我们使用 getNumbers() 函数创建了一个生成器对象 gen，并通过调用 next() 方法来获取迭代器对象中的值以及判断是否已经到达最后一个值。在最后一个 next() 方法调用之后，生成器对象中已经没有剩余的值，因此我们得到了 { value: undefined, done: true } 这个结果。

异步生成器的概念与使用

异步生成器是 ES9 中新应用的一种语法，它可以使生成器函数实现异步功能。在异步生成器中，我们可以使用 yield 关键字来暂停函数的执行，之后可以通过 await 表达式等待异步操作的结果，然后继续执行函数的下一步操作。异步生成器函数还会返回一个迭代器对象，我们可以通过该对象从异步生成器函数获取信息。

以下是一个异步生成器函数的例子：

// javascriptcn.com 代码示例
async function* getSomeData() {
  const data1 = await fetch('/api/data1');
  const result1 = await data1.json();
  yield result1;

  const data2 = await fetch('/api/data2');
  const result2 = await data2.json();
  yield result2;

  const data3 = await fetch('/api/data3');
  const result3 = await data3.json();
  yield result3;
}

(async function(){
  const gen = getSomeData();
  const result1 = await gen.next();
  console.log(result1.value);
  const result2 = await gen.next();
  console.log(result2.value);
  const result3 = await gen.next();
  console.log(result3.value);
})();

在这个例子中，我们使用 async function* 来声明一个异步生成器函数 getSomeData()。该函数中，我们使用三个 yield 关键字来暂停函数的执行，并分别使用异步操作等待三个 api 的调用结果。在函数执行过程中，异步操作会自动暂停并等待结果返回，这样我们就可以方便地处理异步操作。

在使用异步生成器的过程中，我们仍然可以使用 for...await...of 循环来遍历异步生成器的返回值。示例如下：

(async function(){
  for await (let data of getSomeData()) {
    console.log(data);
  }
})();

在这个示例中，我们使用 for...await...of 循环来遍历异步生成器函数 getSomeData() 返回的值。这个循环会自动调用迭代器对象的 next() 方法，并等待异步操作返回结果。当整个异步生成器函数执行完成后，for...await...of 循环也会自动停止。

示例代码

为了更好地理解异步生成器的使用，我们在这里给出一个完整的示例代码，它可以按顺序获取三个 api 的数据，并将它们打印出来。具体代码如下：

// javascriptcn.com 代码示例
async function* getSomeData() {
  const data1 = await fetch('/api/data1');
  const result1 = await data1.json();
  yield result1;

  const data2 = await fetch('/api/data2');
  const result2 = await data2.json();
  yield result2;

  const data3 = await fetch('/api/data3');
  const result3 = await data3.json();
  yield result3;
}

(async function(){
  for await (let data of getSomeData()) {
    console.log(data);
  }
})();

通过该示例代码，我们可以发现异步生成器可以使异步编程的过程更加方便灵活。它结合了异步函数和生成器的概念，可以帮助开发者轻松地实现异步操作，从而提高代码的可读性和可维护性。因此，在项目开发中，我们可以使用异步生成器作为异步编程的最佳实践方式。

总结

在本篇文章中，我们深入探讨了 ES9 中的异步生成器，并给出了相关的示例代码，希望读者可以通过本文更好地理解异步编程以及使用异步生成器的优点。对于前端开发人员而言，掌握异步编程是非常重要的，因为它可以使得我们的代码更加高效高质。如果你还不熟练掌握异步编程方面的知识，那就赶快进入到异步编程的学习中来吧！

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