使用 await 关键字等待 Promise 解析

欢迎来到 JavaScript 异步编程的奇妙世界

大家好，欢迎来到今天的讲座！今天我们要聊的是 JavaScript 中非常重要的一个主题：如何使用 await 关键字来优雅地处理异步操作。如果你曾经在写代码时遇到过回调地狱（Callback Hell），或者对 Promise 的链式调用感到困惑，那么今天的讲座将会是你的一大福音。

什么是 await？

简单来说，await 是一个可以让异步代码看起来像同步代码的关键字。它只能在 async 函数中使用，用来“暂停”函数的执行，直到某个 Promise 被解析或拒绝。一旦 Promise 完成，await 会返回 Promise 的结果，并继续执行后续代码。

听起来有点抽象？别担心，我们马上通过一些例子来解释。

await 和 Promise 的关系

在深入讲解 await 之前，我们先快速回顾一下 Promise。Promise 是 JavaScript 中处理异步操作的一种方式。它有三种状态：

• Pending（进行中）：初始状态，既不是成功也不是失败。
• Fulfilled（已成功）：操作完成，返回结果。
• Rejected（已失败）：操作失败，返回错误。

通常，我们会使用 .then() 和 .catch() 来处理 Promise 的结果。比如：

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { message: "Hello, world!" };
      resolve(data);
    }, 1000);
  });
};

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

这段代码会在 1 秒后打印出 { message: "Hello, world!" }。虽然这看起来很简单，但当你需要处理多个异步操作时，代码可能会变得非常复杂，甚至出现“回调地狱”。

await 让异步代码更简洁

await 的出现正是为了解决这个问题。它可以让你以同步的方式编写异步代码，而不需要层层嵌套的 .then() 和 .catch()。来看一下同样的代码，使用 await 重写后会是什么样子：

async function fetchDataWithAwait() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchDataWithAwait();

是不是清爽多了？await 让我们可以直接“等待” fetchData() 返回的结果，而不需要显式地使用 .then()。如果 fetchData() 抛出了错误，await 会自动将其捕获并抛给 catch 块。

await 的工作原理

await 实际上是 JavaScript 引擎的一个“暂停”机制。当遇到 await 时，JavaScript 会暂停当前 async 函数的执行，直到 Promise 被解析或拒绝。一旦 Promise 完成，await 会返回 Promise 的结果，并继续执行后续代码。

为了更好地理解这一点，我们可以想象 await 是一个“魔法暂停按钮”。按下这个按钮后，程序会暂时停下来，等 Promise 完成后再继续运行。这个过程不会阻塞主线程，因此其他任务仍然可以正常执行。

多个 await 的顺序执行

有时候，我们需要依次执行多个异步操作。await 让我们可以通过简单的顺序书写来实现这一点。例如：

async function fetchMultipleData() {
  try {
    const data1 = await fetchData();
    console.log("First data:", data1);

    const data2 = await fetchData();
    console.log("Second data:", data2);

    const data3 = await fetchData();
    console.log("Third data:", data3);
  } catch (error) {
    console.error(error);
  }
}

fetchMultipleData();

在这个例子中，data1、data2 和 data3 会依次被获取，每个 await 都会等待前一个 Promise 完成后再继续执行下一个。这种顺序执行的方式非常适合那些依赖于前一个操作结果的场景。

并行执行多个 await

然而，有时候我们并不需要等待每个 Promise 完成后再开始下一个。如果我们有多个独立的异步操作，可以使用 Promise.all() 来并行执行它们。await 可以与 Promise.all() 结合使用，确保所有 Promise 同时开始并等待它们全部完成。

async function fetchAllDataInParallel() {
  try {
    const [data1, data2, data3] = await Promise.all([
      fetchData(),
      fetchData(),
      fetchData()
    ]);

    console.log("All data fetched:", data1, data2, data3);
  } catch (error) {
    console.error(error);
  }
}

fetchAllDataInParallel();

在这个例子中，fetchData() 会被同时调用三次，await 会等待所有 Promise 完成后再继续执行。这种方式比顺序执行要快得多，尤其是在处理多个独立的异步操作时。

await 和错误处理

await 本身并不会捕获错误，因此我们需要使用 try...catch 语句来处理可能发生的异常。如果 await 等待的 Promise 被拒绝，错误会被抛出并被捕获到 catch 块中。我们可以通过这种方式来优雅地处理异步操作中的错误。

async function fetchDataWithErrorHandling() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error("An error occurred:", error.message);
  }
}

fetchDataWithErrorHandling();

如果你不使用 try...catch，并且 await 等待的 Promise 被拒绝，错误会冒泡到调用栈的最外层，导致未捕获的异常。因此，建议总是使用 try...catch 来处理 await 的错误。

await 和 async 的组合

await 必须放在 async 函数中使用。async 函数会自动将返回值包装成一个 Promise，即使你没有显式地返回 Promise。这意味着你可以像这样简化代码：

async function fetchDataSimplified() {
  return await fetchData();
}

fetchDataSimplified().then(data => console.log(data));

实际上，await 和 return 的组合可以进一步简化为：

async function fetchDataSimplified() {
  return fetchData();
}

因为 async 函数会自动将返回值包装成 Promise，所以 await 在这里并不是必须的。不过，如果你需要在返回之前做一些额外的处理，await 仍然是非常有用的。

await 的性能考虑

虽然 await 让异步代码看起来更简洁，但它也有一些性能上的权衡。由于 await 会暂停函数的执行，直到 Promise 完成，因此在某些情况下，可能会导致不必要的延迟。特别是当你有多个独立的异步操作时，应该尽量使用 Promise.all() 来并行执行它们，而不是依次等待。

此外，await 不能用于全局作用域或非 async 函数中。如果你尝试在这些地方使用 await，浏览器或 Node.js 会抛出语法错误。因此，确保你总是在 async 函数中使用 await。

总结

今天我们学习了如何使用 await 关键字来简化 JavaScript 中的异步编程。await 让我们可以以同步的方式编写异步代码，避免了回调地狱和复杂的链式调用。通过结合 async 函数和 try...catch，我们可以优雅地处理异步操作中的错误，并确保代码的可读性和维护性。

当然，await 也有它的局限性。在处理多个独立的异步操作时，我们应该尽量使用 Promise.all() 来并行执行它们，以提高性能。此外，await 不能用于全局作用域或非 async 函数中，因此要注意使用的场景。

希望今天的讲座对你有所帮助！如果你有任何问题或想了解更多关于 JavaScript 异步编程的内容，欢迎随时提问。编码愉快！