ES8 异步编程：Generator 和 Async 函数-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步编程是必不可少的一部分。ES8 中增加了 Generator 和 Async 函数，使得异步编程变得更加简单和易于管理。本文将介绍这两种函数的用法，并提供实际的代码示例，希望能够帮助大家更好地学习和应用。

1. Generator 函数

Generator 函数是一种特殊的函数，它有以下几个特点：

使用 function* 定义，函数体内部使用 yield 表达式；
调用该函数不会立即执行函数内部的代码，而是返回一个迭代器对象；
通过调用迭代器对象的 next() 方法来执行函数内部的代码，每次执行到 yield 表达式就会停止，返回 yield 后面的值；
可以多次执行该函数，每次执行到 yield 表达式的地方都会停止，返回上一次执行的值。

举个例子，下面是一个简单的 Generator 函数：

// javascriptcn.com 代码示例
function* myGenerator() {
  yield 'hello';
  yield 'world';
  return 'done';
}

const iterator = myGenerator();
console.log(iterator.next()); // { value: 'hello', done: false }
console.log(iterator.next()); // { value: 'world', done: false }
console.log(iterator.next()); // { value: 'done', done: true }

在上面的例子中，我们定义了一个名为 myGenerator 的 Generator 函数，它定义了两个 yield 表达式和一个 return 语句。调用该函数返回的是一个迭代器对象 iterator，我们通过调用它的 next() 方法来执行函数内部的代码。每次调用 next() 方法，都会在 yield 处停止，返回 yield 后面的值。最后一个 next() 方法返回的是 return 语句的值，并将 done 设置为 true。

Generator 函数的一个重要特点是可以使用 yield 表达式来实现异步编程。下面是一个使用 Generator 函数实现异步编程的例子：

// javascriptcn.com 代码示例
function* myAsyncFunction() {
  try {
    const result1 = yield fetch('https://api.example.com/data1');
    const result2 = yield fetch(`https://api.example.com/data2?param=${result1}`);
    console.log(result2);
  } catch (error) {
    console.log(error);
  }
}

const iterator = myAsyncFunction();
const promise1 = iterator.next().value;
promise1.then(response1 => {
  return iterator.next(response1.json()).value;
}).then(response2 => {
  return iterator.next(response2.json()).value;
}).catch(error => {
  iterator.throw(error);
});

在上面的例子中，我们定义了一个名为 myAsyncFunction 的 Generator 函数，它使用 yield 表达式来执行异步操作 fetch。我们定义一个迭代器对象 iterator，并通过调用它的 next() 方法来执行代码。next() 方法返回的是一个 Promise 对象，我们使用 then() 方法来处理这个 Promise。在第一个 then() 方法中，我们向 Generator 函数传递了 response1.json() 的值，通过调用 iterator.next(response1.json()) 来获取下一个 yield 表达式的值。同样的，在第二个 then() 方法中，我们向 Generator 函数传递了 response2.json() 的值。最后，如果出现错误，我们可以通过调用 iterator.throw(error) 来向 Generator 函数抛出一个异常。

虽然使用 Generator 函数实现异步编程相比使用回调函数或 Promise 更加简单，但是代码量仍然较多。下面我们将介绍另一种更加简洁的异步编程方式：Async 函数。

2. Async 函数

Async 函数是 Generator 函数的语法糖，它的使用方式与普通函数类似。使用 Async 函数可以让异步编程变得更加直观和易于管理，代码量也更少。下面是一个使用 Async 函数实现异步编程的例子：

// javascriptcn.com 代码示例
async function myAsyncFunction() {
  try {
    const response1 = await fetch('https://api.example.com/data1');
    const result1 = await response1.json();
    const response2 = await fetch(`https://api.example.com/data2?param=${result1}`);
    const result2 = await response2.json();
    console.log(result2);
  } catch (error) {
    console.log(error);
  }
}

myAsyncFunction();

在上面的例子中，我们定义了一个名为 myAsyncFunction 的 Async 函数。在函数体内部，我们通过 await 关键字来阻塞代码的执行，直到 Promise 对象返回结果。使用 try-catch 语句来处理错误。与 Generator 函数相同，Async 函数也可以通过返回 Promise 对象来获得函数执行结果。

使用 Async 函数实现异步编程，可以使代码更加清晰易懂，并减少代码量。但是需要注意的是，Async 函数只是语法糖，本质上它仍然是使用了 Promise 来处理异步操作。因此，在理解和使用 Async 函数时，仍然需要深入了解 Promise 的使用方式和原理。

3. 总结

本文介绍了 ES8 中的异步编程方法：Generator 函数和 Async 函数。Generator 函数是一种特殊的函数，它使用 yield 表达式来实现异步操作。使用 Generator 函数可以将异步代码变得更加易于管理，并可以通过调用迭代器对象的 next() 方法来控制函数的执行流程。Async 函数是 Generator 函数的语法糖，它的语法更加直观，并可以将异步代码变得更加简洁清晰。但是需要注意的是，Async 函数仍然使用了 Promise 来处理异步操作，在理解和使用 Async 函数时，需要深入了解 Promise 的使用方式和原理。

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