探寻JavaScript 异步编程的艺术：Promise、Async/Await 与异步迭代器

2023-11-13 06:33:47

现代JavaScript 不仅仅只有同步代码，它也提供了许多异步编程特性，包括 Promise、Async/Await 和异步迭代器。这些特性使得处理异步操作变得更加容易，让我们能够编写出更加流畅、高效的代码。

这一章我们将对JavaScript异步编程特性进行深入探索，首先，我们将了解JavaScript的事件循环是如何工作的，然后，我们将逐一介绍Promise、Async/Await 和异步迭代器的使用方法和最佳实践。最后，我们将通过一个实际项目，展示如何使用这些特性来编写出更加健壮、可靠的代码。

事件循环

在深入了解JavaScript异步编程特性之前，我们先来了解一下事件循环是如何工作的。事件循环是JavaScript执行代码的一种机制，它不断地从事件队列中获取事件并执行它们。事件队列是一个先入先出的队列，这意味着最早进入队列的事件将首先被执行。

JavaScript有两种类型的事件：同步事件和异步事件。同步事件是在主线程上执行的，它会阻塞后续代码的执行。异步事件是在其他线程上执行的，它不会阻塞后续代码的执行。

当JavaScript执行一个同步事件时，它会将该事件放入事件队列中。然后，JavaScript会从事件队列中获取事件并执行它们。当JavaScript执行一个异步事件时，它会将该事件放入一个单独的队列中。当异步事件完成时，它会被放入事件队列中。JavaScript会不断地从事件队列中获取事件并执行它们，直到事件队列为空。

Promise

Promise是一种表示异步操作结果的对象。它可以有三种状态：pending、fulfilled和rejected。pending状态表示异步操作正在进行中，fulfilled状态表示异步操作已成功完成，rejected状态表示异步操作已失败。

Promise的构造函数接受一个函数作为参数，该函数称为执行器。执行器有两个参数：resolve和reject。resolve函数用于将Promise的状态从pending变为fulfilled，reject函数用于将Promise的状态从pending变为rejected。

我们可以使用then方法来处理Promise的结果。then方法接受两个函数作为参数，第一个函数用于处理fulfilled状态的Promise，第二个函数用于处理rejected状态的Promise。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 2000);
});

promise.then((result) => {
  console.log(result); // 'Hello, world!'
}).catch((error) => {
  console.error(error);
});

Async/Await

Async/Await是ES2017中引入的两个新的。Async关键字用于修饰函数，Await关键字用于暂停函数的执行，等待异步操作完成。

使用Async/Await，我们可以编写出更加同步的代码，让代码看起来更加容易理解。

async function helloWorld() {
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Hello, world!');
    }, 2000);
  });

  console.log(result); // 'Hello, world!'
}

helloWorld();

异步迭代器

异步迭代器是一种用于迭代异步数据的对象。它与普通迭代器类似，但是它可以返回Promise。

我们可以使用for...of循环来迭代异步迭代器。当for...of循环遇到一个Promise时，它会暂停循环，等待Promise完成。当Promise完成时，for...of循环会继续迭代。

async function* asyncGenerator() {
  yield new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Hello');
    }, 1000);
  });

  yield new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('World');
    }, 2000);
  });
}

(async () => {
  for await (const value of asyncGenerator()) {
    console.log(value); // 'Hello' 'World'
  }
})();