深入剖析 JavaScript 中的 Async 和 Await，实现高效异步开发

2023-10-11 14:00:52

认识回调函数

在探讨 Async 和 Await 之前，我们先来了解一下回调函数。回调函数本质上是一种在将来某个时刻执行的函数。由于 JavaScript 的异步特性，在许多无法立即获得结果的地方都需要回调函数。当我们需要执行多个异步操作时，就会出现问题。

举个例子，我们假设有一个场景：

我们在数据库中查询用户 Arfat。
然后，我们根据查询结果来决定是否向 Arfat 发送电子邮件。
如果需要发送电子邮件，我们就会调用一个异步函数来发送电子邮件。

使用传统的回调函数来实现这个场景，代码可能如下所示：

// 查询用户 Arfat
db.query('SELECT * FROM users WHERE name = "Arfat"', (err, results) => {
  if (err) {
    // 处理错误
  } else {
    // 检查查询结果是否为空
    if (results.length === 0) {
      // 用户 Arfat 不存在，不需要发送电子邮件
    } else {
      // 向 Arfat 发送电子邮件
      sendEmail(results[0].email, (err, info) => {
        if (err) {
          // 处理错误
        } else {
          // 电子邮件已成功发送
        }
      });
    }
  }
});

这个代码虽然可以实现我们的需求，但存在几个问题：

代码可读性差。回调函数嵌套过多，导致代码结构混乱，难以理解。
代码维护性差。当我们需要修改代码时，很容易引入错误，因为需要同时考虑多个回调函数的逻辑。

Async 和 Await 的登场

Async 和 Await 是 JavaScript 中的两个关键词，它们可以帮助我们更轻松地编写异步代码。Async 可以标记一个函数为异步函数，而 Await 可以让我们等待异步操作的完成。

使用 Async 和 Await 来实现上面的场景，代码可以如下所示：

async function main() {
  // 查询用户 Arfat
  const results = await db.query('SELECT * FROM users WHERE name = "Arfat"');

  // 检查查询结果是否为空
  if (results.length === 0) {
    // 用户 Arfat 不存在，不需要发送电子邮件
  } else {
    // 向 Arfat 发送电子邮件
    await sendEmail(results[0].email);
  }
}

main();

这个代码相比于使用回调函数的代码，具有以下几个优点：

代码可读性更好。Async 和 Await 使得代码结构更加清晰，便于理解。
代码维护性更好。当我们需要修改代码时，只需要关注单个函数的逻辑，而不需要考虑多个回调函数的逻辑。

Async 和 Await 的原理

Async 和 Await 的工作原理其实很简单。当我们使用 Async 和 Await 来编写代码时，JavaScript 引擎会自动将我们的代码转换为使用 Promise 的代码。Promise 是一种用来处理异步操作的 JavaScript 对象。

当我们使用 Await 来等待一个异步操作的完成时，JavaScript 引擎会暂停执行当前函数，直到异步操作完成。一旦异步操作完成，JavaScript 引擎就会恢复执行当前函数，并将异步操作的结果作为参数传递给 Await。

Async 和 Await 与其他异步编程范式的比较

除了 Async 和 Await 之外，JavaScript 中还有其他一些异步编程范式，比如回调函数、Promise、Generator 函数等。

异步编程范式	优点	缺点
回调函数	简单易用	代码可读性差，维护性差
Promise	代码可读性好，维护性好	使用起来比较繁琐
Generator 函数	代码可读性好，维护性好，可以更轻松地实现并发编程	使用起来比较复杂
Async 和 Await	代码可读性最好，维护性最好，使用起来最简单	目前只支持在现代浏览器中使用