JavaScript 中 async/await 和 Promise 的关系是什么？

推荐答案

async/await 是 Promise 的语法糖，它使得异步代码的编写和阅读更加直观和简洁。async 函数总是返回一个 Promise 对象，而 await 关键字用于等待一个 Promise 对象的解决（resolve）或拒绝（reject），并返回解决后的值。

本题详细解读

Promise 的基本概念

Promise 是 JavaScript 中处理异步操作的一种机制。它表示一个异步操作的最终完成（或失败）及其结果值。Promise 有三种状态：

• Pending（进行中）：初始状态，既不是成功，也不是失败。
• Fulfilled（已成功）：表示操作成功完成。
• Rejected（已失败）：表示操作失败。

async/await 的基本概念

async/await 是 ES2017 引入的语法，用于简化 Promise 的使用。async 关键字用于声明一个异步函数，而 await 关键字用于等待一个 Promise 的解决。

• async 函数：使用 async 关键字声明的函数会自动返回一个 Promise 对象。如果函数内部返回一个值，Promise 将会以该值解决；如果函数内部抛出异常，Promise 将会以该异常拒绝。

• await 表达式：await 关键字只能在 async 函数内部使用。它会暂停 async 函数的执行，等待 Promise 解决，然后继续执行并返回解决后的值。如果 Promise 被拒绝，await 会抛出异常，可以通过 try/catch 捕获。

async/await 与 Promise 的关系

1. async 函数返回 Promise：无论 async 函数内部返回什么，它总是返回一个 Promise 对象。如果返回的是非 Promise 值，它会被自动包装成一个已解决的 Promise。

2. await 等待 Promise 解决：await 关键字会暂停 async 函数的执行，直到 Promise 解决。如果 Promise 被解决，await 返回解决后的值；如果 Promise 被拒绝，await 抛出异常。

3. 错误处理：在 async/await 中，可以使用 try/catch 来捕获 Promise 被拒绝的情况，这与 Promise 的 .catch() 方法类似。

示例代码

// www.javascriptcn.com code example
// 使用 Promise
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched");
    }, 1000);
  });
}

fetchData().then(data => {
  console.log(data); // 输出: Data fetched
}).catch(error => {
  console.error(error);
});

// 使用 async/await
async function fetchDataAsync() {
  try {
    const data = await fetchData();
    console.log(data); // 输出: Data fetched
  } catch (error) {
    console.error(error);
  }
}

fetchDataAsync();

在这个示例中，fetchDataAsync 函数使用 async/await 语法来等待 fetchData 返回的 Promise 解决，并处理可能的错误。