如何使用 async/await 处理错误？

推荐答案

使用 async/await 处理错误主要依赖于 try...catch 语句。当 async 函数内部调用的 Promise 被 reject 时，await 关键字会抛出错误，这个错误需要被 try...catch 捕获。

基本模式如下：

// www.javascriptcn.com code example
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    // 可以选择抛出错误，返回默认值，或执行其他错误处理逻辑
    throw error; // 重新抛出错误，让上层函数处理
    // return null; // 返回默认值
  }
}

// 调用 fetchData 并处理错误
fetchData()
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Caught outer error:', error));

此外，可以结合 Promise.all, Promise.allSettled 等方法处理多个 Promise 并行操作时的错误。

本题详细解读

async/await 是基于 Promise 的语法糖，它使得异步代码看起来更像同步代码。在 async 函数中，await 关键字会暂停函数的执行，直到 Promise resolved 或 rejected。当 Promise rejected 时，await 会抛出一个错误，这个错误需要被 try...catch 语句捕获处理。

以下是更详细的错误处理方法：

1. try...catch 块:

   • 在 async 函数中，任何可能抛出错误的 await 表达式都应该放在 try 块内。
   • 当 await 后面的 Promise rejected 时，会跳转到 catch 块。
   • catch 块可以处理错误，例如记录日志，返回默认值，或者重新抛出错误给上层函数处理。

2. throw 语句:

   • 在 try 块内，可以自定义错误并用 throw 语句抛出，例如网络请求返回非 200 状态码时。
   • 在 catch 块内，可以使用 throw error 重新抛出捕获到的错误，以便上层函数处理。

3. Promise.all 和错误处理:

   • Promise.all 会等待所有 Promise 都 resolve 或 有一个 Promise reject。 如果有任何 Promise reject, Promise.all 就会抛出第一个被 reject 的 Promise 的错误。
   • 使用 try...catch 可以捕获 Promise.all 抛出的错误。

// www.javascriptcn.com code example
async function processMultipleRequests() {
  try {
    const results = await Promise.all([
      fetch('https://api.example.com/data1'),
      fetch('https://api.example.com/data2'),
    ]);
    console.log('All requests successful:', results);
  } catch (error) {
    console.error('Error in one of the requests:', error);
  }
}

1. Promise.allSettled 和错误处理:
   • Promise.allSettled 会等待所有 Promise 完成，无论它们是 resolve 还是 reject，并返回一个结果数组，其中每个结果包含 status 和 value (或 reason)。
   • 可以使用 Promise.allSettled 来处理多个 Promise，即使其中一些 Promise 失败。

// www.javascriptcn.com code example
async function processMultipleRequestsWithSettled() {
  const results = await Promise.allSettled([
    fetch('https://api.example.com/data1'),
    fetch('https://api.example.com/data2'),
  ]);

    results.forEach(result => {
        if (result.status === 'fulfilled'){
            console.log('Request success:', result.value)
        } else {
             console.error('Request failed:', result.reason)
        }
    })

    console.log('All requests settled:', results)

}

1. 错误处理的层次:

   • 错误处理可以放在 async 函数内部，也可以让上层调用者处理。
   • 通常，如果 async 函数是独立的服务或工具函数，可以内部记录日志，返回默认值，或重新抛出错误。
   • 如果 async 函数是UI逻辑的一部分，可能需要将错误传递给用户界面展示。

总结来说，使用 async/await 处理错误的最佳实践就是：使用 try...catch 块包裹 await 调用， 并根据实际需求进行错误处理，或者使用 Promise.allSettled 处理多个可能失败的 Promise。