二十八、JavaScript中的Generator函数与其在实现Async/Await的应用

在JavaScript的世界里，异步编程是一个核心的主题，而Generator函数和Async/Await则是它的重要部分。这篇文章将深入讨论Generator函数和它在实现Async/Await中的作用，帮助你更深入的理解这两个重要概念。

1. Generator函数的基础

在ES6（ECMAScript 2015）中，JavaScript引入了一种新的函数类型：Generator函数。Generator函数是可以暂停执行并在稍后恢复的特殊函数，这种行为由yield关键字控制。当函数遇到yield语句时，它将暂停执行，并将紧跟在yield后的值作为返回结果。下面是一个简单的示例：

function* generatorFunction() {
  yield 'Hello, ';
  yield 'World!';}
const generator = generatorFunction();
console.log(generator.next().value); // 'Hello, '
console.log(generator.next().value); // 'World!'
console.log(generator.next().done); // true

在这个例子中，generatorFunction是一个Generator函数。调用这个函数不会直接执行函数体内的代码，而是返回一个Generator对象。调用Generator对象的next方法，函数体内的代码将从头开始执行，或者从上一次yield语句处继续执行，直到遇到下一个yield语句。每次调用next方法，都会返回一个对象，包含value和done两个属性。value属性是yield语句后面的值，done属性表示函数是否执行完成。

这种暂停执行的特性使得Generator函数能够以一种完全不同的方式来编写和理解代码，尤其是在处理复杂的异步逻辑时。

2. Generator函数与异步操作

Generator函数的真正威力在于它能以同步的方式来编写异步代码。通过使用yield关键字，我们可以暂停函数的执行，等待异步操作完成，然后再继续执行。

这是一个使用Generator函数处理异步操作的例子：

function* fetchUser(userId) {
  const response = yield fetch(`https://api.example.com/users/${userId}`);
  const user = yield response.json();
  return user;}
const generator = fetchUser(1);const responsePromise = generator.next().value;
responsePromise.then(response => {
  const userPromise = generator.next(response).value;
  userPromise.then(user => generator.next(user));});

在这个例子中，我们首先发起一个网络请求来获取用户信息。这是一个异步操作，但是使用yield关键字，我们可以将其转化为一个同步操作。网络请求完成后，我们获取响应并解析为JSON。这也是一个异步操作，但是我们同样可以使用yield关键字来将其转化为同步操作。

带你读《现代Javascript高级教程》二十八、JavaScript中的Generator函数与其在实现Async/Await的应用（2）https://developer.aliyun.com/article/1349500?groupCode=tech_library