async/await语法与错误处理

async/await 是 JavaScript 中处理异步操作的语法糖。它在 Promise 的基础上提供了更加简洁和易于理解的代码结构，使得异步代码看起来更像同步代码，从而提高了代码的可读性和可维护性。

1. async/await基本概念

async函数

async 是用来声明一个函数为异步函数的关键字。异步函数会自动返回一个 Promise，并且可以使用 await 关键字来等待异步操作的完成。

async function fetchData() {
  return '数据加载完成';
}

fetchData().then(response => {
  console.log(response); // 输出：'数据加载完成'
});

在上面的示例中，fetchData 是一个异步函数，它返回的是一个 Promise 对象。

await关键字

await 用来等待一个 Promise 对象的结果，它只能在 async 函数中使用。await 会暂停函数的执行，直到 Promise 解决（fulfilled）或拒绝（rejected）。

async function fetchData() {
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => resolve('数据加载完成'), 1000);
  });
  console.log(result); // 输出：'数据加载完成'
}

fetchData();

在上面的示例中，await 会暂停 fetchData 函数的执行，直到 Promise 完成并返回结果。

2. async/await与Promise的关系

async 函数返回一个 Promise，即使你在函数内没有显式地使用 return 语句，它也会隐式地返回一个 Promise。
await 只能等待 Promise，如果它等待的值不是 Promise，则会自动将其转换为 Promise.resolve()。

示例：使用async/await处理多个Promise

async function fetchData() {
  const data1 = await new Promise(resolve => setTimeout(() => resolve('数据1'), 1000));
  const data2 = await new Promise(resolve => setTimeout(() => resolve('数据2'), 2000));
  console.log(data1, data2); // 输出：'数据1 数据2'
}

fetchData();

3. 错误处理

async/await 提供了一种简洁的错误处理方式，通常我们使用 try/catch 来捕获异步操作中的错误。

try/catch语法

async function fetchData() {
  try {
    const data = await new Promise((resolve, reject) => {
      setTimeout(() => reject('请求失败'), 1000);
    });
  } catch (error) {
    console.log('错误信息:', error); // 输出：'错误信息: 请求失败'
  }
}

fetchData();

在这个例子中，Promise 被拒绝了，所以 catch 语句会捕获到错误并输出错误信息。

4. 错误处理的实用案例

示例 1：多个异步操作并发执行

在多个异步操作并发执行时，我们可以使用 try/catch 来单独捕获每一个操作的错误，避免一个操作的失败影响到其他操作。

async function fetchData() {
  try {
    const data1 = await new Promise((resolve, reject) => setTimeout(() => resolve('数据1'), 1000));
    const data2 = await new Promise((resolve, reject) => setTimeout(() => resolve('数据2'), 2000));
    console.log(data1, data2); // 输出：'数据1 数据2'
  } catch (error) {
    console.error('发生错误:', error);
  }
}

fetchData();

示例 2：并行执行多个异步操作（Promise.all）

当多个异步操作并行执行时，Promise.all 会等待所有的 Promise 都成功解决，或者其中一个失败时抛出错误。

async function fetchData() {
  try {
    const [data1, data2] = await Promise.all([
      new Promise(resolve => setTimeout(() => resolve('数据1'), 1000)),
      new Promise(resolve => setTimeout(() => resolve('数据2'), 2000)),
    ]);
    console.log(data1, data2); // 输出：'数据1 数据2'
  } catch (error) {
    console.error('发生错误:', error);
  }
}

fetchData();

在此示例中，Promise.all 确保了两个异步操作并行执行，并且只有在两个操作都完成后才会继续。