让 async/await 原理照亮异步世界的迷雾

2023-12-28 13:38:11

引言

在异步编程的浩瀚世界里，async/await 犹如一盏明灯，指引着我们穿越晦涩难懂的迷雾，走向清晰明朗的代码世界。它的出现，彻底颠覆了我们对异步编程的传统认知，让我们能够以同步的写法实现异步的执行，从而大幅提升代码的可读性和可维护性。

但仅仅使用 async/await 还不够，要真正驾驭它的力量，就必须深入理解其背后的原理，揭开它的神秘面纱。本文将深入浅出地剖析 async/await 的工作机制，带你领略其巧妙的设计和实现。

异步编程的痛点

在传统异步编程中，我们通常使用回调函数或 Promise 来处理异步操作。这种方式固然可以实现异步的执行，但代码逻辑往往变得复杂且难以理解。例如：

const fetchData = (callback) => {
  setTimeout(() => {
    callback({ data: 'Hello, World!' });
  }, 1000);
};

fetchData((data) => {
  console.log(data);
});

上面的代码中，fetchData 函数是一个异步操作，它会延迟 1 秒后返回数据。为了处理异步返回的结果，我们不得不使用回调函数，这会导致代码的嵌套和难以理解的回调地狱。

`async/await` 的诞生

为了解决传统异步编程的痛点，async/await 应运而生。它是一种语法糖，可以让我们使用同步的写法来处理异步操作。

async function fetchData() {
  const data = await setTimeout(() => {
    return { data: 'Hello, World!' };
  }, 1000);
  console.log(data);
}

在上面的代码中，fetchData 函数被声明为一个异步函数，并使用 await 等待 setTimeout 返回的结果。这使得我们可以像编写同步代码一样，直接获取异步操作的结果。

`async/await` 的工作原理

async/await 的工作原理非常巧妙。当遇到 await 关键字时，它会立即返回一个 Promise 对象，并暂停当前函数的执行。当 Promise 对象被解析时，它会恢复函数的执行，并将解析结果作为 await 表达式的返回值。

这个过程可以被分解为以下几个步骤：

当遇到 await 表达式时，JavaScript 引擎会创建一个 Promise 对象并暂停函数的执行。
Promise 对象会被传递给事件循环，等待它被解析或拒绝。
当 Promise 对象被解析或拒绝时，事件循环会将控制权交还给暂停的函数。
函数继续执行，并将 Promise 对象的解析结果或拒绝原因作为 await 表达式的返回值。

异步函数和生成器函数

async 函数本质上是一种生成器函数，它返回一个异步迭代器。当使用 await 表达式时，它会暂停函数的执行，并返回当前迭代器的当前值。当 Promise 对象被解析时，它会恢复函数的执行，并将解析结果作为下一个迭代器的当前值。

这种机制允许 async/await 以同步的方式处理异步操作。它会将异步操作拆分为多个步骤，并使用事件循环来管理它们的执行。

异常处理

在 async/await 中，异常处理与普通函数不同。当 async 函数中抛出异常时，它会被自动包装成一个 Rejected Promise 对象，并被传递给调用它的函数。

为了处理 async 函数中抛出的异常，我们可以使用 try...catch 语句或 .catch() 方法：

async function fetchData() {
  try {
    const data = await setTimeout(() => {
      throw new Error('Error!');
    }, 1000);
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}