创建您第一个异步 JavaScript 生成器

2023-11-26 09:38:52

引言

在现代 Web 开发中，异步编程变得越来越重要。异步编程允许我们编写可以同时处理多个任务的代码，从而提高应用程序的性能和响应能力。JavaScript 提供了多种机制来支持异步编程，其中包括生成器和 Promise。

生成器

生成器是一种可以暂停和恢复执行的函数。这允许我们在一个函数中编写多个步骤，然后逐个步骤地执行它们。生成器使用 yield 来暂停执行，然后使用 next() 方法来恢复执行。

例如，以下生成器将生成一个斐波那契数列：

function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

要使用生成器，我们需要先创建一个生成器对象。然后，我们可以使用 next() 方法来一步一步地执行生成器。

const generator = fibonacci();
console.log(generator.next().value); // 0
console.log(generator.next().value); // 1
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2

Promise

Promise 是一个对象，它代表一个异步操作的最终完成或失败。Promise 有三个状态：

pending：初始状态，表示异步操作尚未完成。
fulfilled：成功状态，表示异步操作已成功完成。
rejected：失败状态，表示异步操作已失败。

我们可以使用 then() 方法来处理 Promise。then() 方法接受两个参数：一个成功处理函数和一个失败处理函数。当 Promise 成功完成时，将调用成功处理函数；当 Promise 失败时，将调用失败处理函数。

例如，以下代码使用 Promise 来获取服务器上的数据：

const promise = fetch('https://example.com/data.json');

promise
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

使用生成器和 Promise 来简化异步代码

生成器和 Promise 可以很好地结合起来使用来简化异步代码。我们可以使用生成器来编写异步操作的步骤，然后使用 Promise 来处理这些步骤的结果。

例如，以下代码使用生成器和 Promise 来获取服务器上的数据并将其显示在页面上：

function* getData() {
  const response = yield fetch('https://example.com/data.json');
  const data = yield response.json();
  return data;
}

const generator = getData();

generator.next().value
  .then(response => generator.next(response).value)
  .then(data => {
    console.log(data);
    generator.next();
  });