Generator 和 Async/await：异步编程的艺术

2024-01-29 16:49:49

引言

在现代网络应用中，异步编程是必不可少的。它允许我们在不阻塞主线程的情况下执行耗时的任务，从而提高应用程序的性能和响应速度。Generator 和 Async/await 是 JavaScript 中常用的两种异步编程方式，它们都有各自的优缺点。本文将对这两种编程方式进行详细介绍，并比较它们的优缺点，以帮助你更好地理解和使用它们。

Generator

Generator 是 ES6 标准中的异步编程方式，它使用 yield 来暂停函数的执行，并在稍后恢复执行。Generator 函数可以被看作一种特殊类型的函数，它可以在运行时暂停和恢复执行。当一个 Generator 函数被调用时，它不会立即执行，而是返回一个 Generator 对象。Generator 对象包含了函数的当前状态，包括函数的局部变量、堆栈和当前执行位置。

Generator 函数可以被多次调用，每次调用都会从上一次暂停的位置继续执行。当一个 Generator 函数遇到 yield 关键字时，它会暂停执行并返回一个值。这个值可以是任何类型的数据，包括另一个 Generator 对象。当 Generator 函数被再次调用时，它会从 yield 关键字处继续执行。

Generator 函数非常适合用于编写异步代码。例如，以下代码使用 Generator 函数来实现一个简单的计时器：

function* timer(duration) {
  while (duration > 0) {
    yield new Promise(resolve => setTimeout(resolve, duration));
    duration -= 1000;
  }
}

const timer1 = timer(3000);

timer1.next().value.then(() => {
  console.log('1 second has passed');
});

timer1.next().value.then(() => {
  console.log('2 seconds have passed');
});

timer1.next().value.then(() => {
  console.log('3 seconds have passed');
});

Async/await

Async/await 是 ES7 标准中的异步编程方式，它使用 async 和 await 关键字来编写异步代码。async 函数是一种特殊的函数，它可以被看作是 Generator 函数的语法糖。async 函数内部可以使用 await 关键字来暂停函数的执行，并等待一个 Promise 对象被解析。当 Promise 对象被解析后，await 关键字会返回 Promise 对象的值，并继续执行 async 函数。

Async/await 函数非常适合用于编写异步代码。例如，以下代码使用 Async/await 函数来实现一个简单的计时器：

async function timer(duration) {
  while (duration > 0) {
    await new Promise(resolve => setTimeout(resolve, duration));
    duration -= 1000;
  }
}

timer(3000).then(() => {
  console.log('3 seconds have passed');
});

Generator 和 Async/await 的比较

Generator 和 Async/await 都是异步编程的有效方式，它们都有各自的优缺点。Generator 函数更灵活，因为它可以被多次调用，并且可以返回任何类型的数据。Async/await 函数更简单，因为它使用更少的语法，并且更容易编写。

以下是 Generator 和 Async/await 的比较表：

特性	Generator	Async/await
语法	yield	async/await
暂停函数的执行	是	是
恢复函数的执行	是	是
可以被多次调用	是	否
可以返回任何类型的数据	是	否
语法更简单	否	是