Generator函数解锁async/await的神秘面纱

2023-04-13 23:44:23

Generator函数的魅力，助力异步代码编写

在深入探讨 JavaScript 中强大的异步编程技术 async/await 之前，让我们先探究其基础——Generator函数。

Generator函数：暂停执行的魔力

Generator函数是一种独特的函数类型，它们能够使用 yield 暂停函数的执行。与普通函数不同，Generator函数可以在稍后通过调用 next() 方法继续执行。这种机制为处理异步操作提供了便利，因为它允许我们在等待异步操作完成时暂停函数执行，而无需阻塞主线程。

Generator函数的简单用法

定义Generator函数与普通函数类似，只需在函数名后面加上一个星号 (*) 即可。在函数体内，可以使用 yield 关键字暂停函数执行。例如，以下代码定义了一个 Generator函数，逐个打印数组中的数字：

function* printNumbers() {
  for (const number of [1, 2, 3, 4, 5]) {
    yield number;
  }
}

要使用 Generator 函数，需要创建一个遍历器对象。遍历器对象是 Generator 函数的实例，它提供 next() 方法来继续执行 Generator 函数。例如，以下代码创建了一个遍历器对象，并使用 next() 方法打印出数组中的数字：

const iterator = printNumbers();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3
console.log(iterator.next().value); // 4
console.log(iterator.next().value); // 5

async/await 的幕后推手：Generator函数

async/await 是 JavaScript 中用来处理异步操作的语法糖。它使我们可以像编写同步代码一样编写异步代码，不必担心底层异步操作的复杂性。async/await 的实现原理就是利用 Generator 函数。

当使用 async/await 编写异步代码时，JavaScript 引擎会将我们的代码转换为 Generator 函数。然后，它创建了一个遍历器对象，并使用 next() 方法逐步执行 Generator 函数。当 Generator 函数遇到 yield 关键字时，JavaScript 引擎会暂停 Generator 函数的执行，并在异步操作完成后继续执行。

如何优雅地使用 async/await

使用 async/await 非常简单。首先，将处理异步操作的函数声明为 async 函数。然后，可以在 async 函数体内使用 await 关键字等待异步操作的完成。例如，以下代码使用 async/await 从远程服务器获取并打印数据：

async function fetchData() {
  const response = await fetch('https://example.com/data.json');
  const data = await response.json();
  console.log(data);
}