ES8 中的 async 生成器函数的应用-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，异步编程模型成为了必备的技能。ES6 的 Promise 则是其中一个比较流行的解决方案，然而封装异步操作对于一些复杂的场景并不是那么简单。ES8 中引入了 async 和 await 来更好地解决异步编程的问题，而 async 生成器函数则进一步增强了异步编程的能力和灵活性。

async 生成器函数是什么？

async 生成器函数实际上是 async 和 generator 两个特性的结合，将它们组合在一起可以得到一个使用起来非常方便的异步编程解决方案。async 表示这是一个异步函数，generator 表示这是一个可以被暂停和恢复的函数。

async 生成器函数的格式如下：

async function* foo() {
  // 生成器函数体
}

调用一个 async 生成器函数会返回一个异步的生成器对象，这个对象本质上就是一个 Promise，它可以使用 await 关键字对异步操作进行等待和同步。

async 生成器函数的应用

async 生成器函数的应用非常灵活，可以用于处理一些异步操作序列或者并行的异步操作。下面是一些具体的应用场景及示例代码。

处理异步序列

在一些应用场景中，需要依次执行多个异步操作，并按照一定规则对它们的结果进行处理。使用 Promise.all 可以解决这个问题，不过如果异步操作的数量不确定，就需要使用 async 生成器函数来实现。

下面是一个实现从一个数据源获取数据列表的示例代码，使用 async 生成器函数实现了按照一定规则依次获取数据的操作：

// javascriptcn.com 代码示例
async function* getDataList() {
  let i = 0;
  while (true) {
    const data = await fetchData(i++);
    if (data === null) {
      return;
    }
    yield data;
  }
}

async function doSomethingWithDatalist() {
  for await (const data of getDataList()) {
    // do something with data
  }
}

上面的代码中，getDataList 是一个 async 生成器函数，它通过调用一个异步的 fetchData 函数不断获取数据。注意 async 生成器函数可以通过 return 语句来结束，这个 return 的结果会被转换成一个 resolved 的 Promise，并作为 async 生成器对象的 value。

在 doSomethingWithDatalist 函数中使用 for await...of 语句来遍历异步生成器对象，每次迭代都会等待异步操作的结果。这样我们可以比较方便地依次处理一系列异步操作的结果。

处理并行异步操作

在一些应用场景中，需要同时执行多个异步操作，并在所有操作都完成后对它们的结果进行处理，这时就可以使用 async 生成器函数来实现。

下面是一个实现从多个数据源获取数据列表的示例代码，使用 async 生成器函数实现了并行获取数据的操作：

// javascriptcn.com 代码示例
async function* getDataFromSources(sourceUrls) {
  const promises = sourceUrls.map(url => fetchData(url));
  const dataList = await Promise.all(promises);
  yield dataList;
}

async function doSomethingWithDatalist() {
  for await (const data of getDataFromSources(['data1.json', 'data2.json', 'data3.json'])) {
    // do something with dataList
  }
}

上面的代码中，getDataFromSources 是一个 async 生成器函数，它使用 Promise.all 来并行获取多个数据源的数据，并将结果封装成一个 dataList 数组。在 doSomethingWithDatalist 函数中对 dataList 进行处理。对于并行执行的异步操作，我们可以使用 async 生成器函数延迟执行，并在所有操作完成后回调处理函数。

注意事项

使用 async 生成器函数需要注意以下几点：

async 生成器函数只能通过函数声明函数式的定义形式，不能使用变量声明式的形式定义。
async 生成器函数返回的是一个异步的生成器对象，而不是一个普通的生成器对象。
async 生成器函数可以使用 return 语句来返回值，这个返回值会被转换为一个 resolved 的 Promise。
在异步生成器对象上使用 for await...of 语句时，我们需要保证异步生成器对象不会在处理过程中被回收，否则会导致程序出错。

总结

async 生成器函数是 ES8 中一个非常有用的异步编程特性，它将 async 和 generator 两种特性进行了结合，并开发了一些新的用法，为异步编程提供了更强的解决方案。在实际应用中，我们可以通过 async 生成器函数来实现处理异步序列、处理并行异步操作等场景。掌握 async 生成器函数的使用技巧，能够提高我们的异步编程能力，从而更好地完成我们的工作。

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