6.4 async/await 语法糖与错误处理

6.4 async/await 语法糖与错误处理

async/await 是 ES2017 引入的语法糖，基于 Promise，用于简化异步代码的编写。它使异步代码看起来像同步代码，提高了代码的可读性和可维护性。本节将详细介绍 async/await 的用法及其错误处理机制。

6.4.1 async/await 的基本用法

1. async 函数
async 关键字用于声明一个异步函数，该函数会隐式返回一个 Promise。

示例

async function fetchData() {
  return "Data fetched!";
}

fetchData().then((data) => {
  console.log(data); // 输出 "Data fetched!"
});

2. await 表达式
await 关键字用于等待一个 Promise 完成，并返回其结果。它只能在 async 函数中使用。

示例

async function fetchData() {
  const data = await new Promise((resolve) => {
    setTimeout(() => resolve("Data fetched!"), 1000);
  });
  console.log(data); // 1 秒后输出 "Data fetched!"
}

fetchData();

6.4.2 错误处理

async/await 的错误处理可以通过 try/catch 语句实现。

1. 基本用法

async function fetchData() {
  try {
    const data = await new Promise((_, reject) => {
      setTimeout(() => reject("Error occurred!"), 1000);
    });
    console.log(data); // 不会执行
  } catch (error) {
    console.log(error); // 输出 "Error occurred!"
  }
}

fetchData();

2. 处理多个异步操作

async function fetchAllData() {
  try {
    const data1 = await fetchData1();
    const data2 = await fetchData2();
    console.log(data1, data2);
  } catch (error) {
    console.log(error);
  }
}

fetchAllData();

6.4.3 async/await 与 Promise 的结合

async/await 可以与 Promise 的静态方法（如 Promise.all）结合使用，处理多个异步操作。

1. 并行执行异步操作

async function fetchAllData() {
  try {
    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
    console.log(data1, data2);
  } catch (error) {
    console.log(error);
  }
}

fetchAllData();

2. 超时机制

async function fetchWithTimeout() {
  try {
    const data = await Promise.race([
      fetchData(),
      new Promise((_, reject) => setTimeout(() => reject("Timeout!"), 500)),
    ]);
    console.log(data);
  } catch (error) {
    console.log(error); // 如果超时，输出 "Timeout!"
  }
}

fetchWithTimeout();

6.4.4 示例代码

示例 1：基本用法

async function fetchUser() {
  const response = await fetch("https://api.example.com/user");
  const user = await response.json();
  return user;
}

fetchUser().then((user) => {
  console.log(user);
});

示例 2：错误处理

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Error:", error.message);
  }
}

fetchData();

示例 3：并行执行

async function fetchAllData() {
  try {
    const [user, posts] = await Promise.all([
      fetch("https://api.example.com/user").then((res) => res.json()),
      fetch("https://api.example.com/posts").then((res) => res.json()),
    ]);
    console.log(user, posts);
  } catch (error) {
    console.log("Error:", error.message);
  }
}

fetchAllData();

6.4.5 总结

• async/await：简化异步代码的编写，使代码看起来像同步代码。
• 错误处理：通过 try/catch 语句捕获和处理错误。
• 与 Promise 结合：可以结合 Promise.all、Promise.race 等方法处理多个异步操作。

通过掌握 async/await，你可以编写更简洁、更易读的异步代码。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. async/await 的主要优势是什么？
2. 如何使用 try/catch 处理 async/await 中的错误？
3. 在什么情况下应该使用 Promise.all 与 async/await 结合？