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

推荐答案

// www.javascriptcn.com code example
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();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error; // 可以选择重新抛出错误或处理错误
  }
}

// 使用示例
fetchData()
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

本题详细解读

1. async/await 的基本用法

async/await 是 ECMAScript 2017 (ES8) 引入的语法糖，用于简化异步操作的处理。async 关键字用于声明一个异步函数，而 await 关键字用于等待一个 Promise 对象的解析。

2. 错误处理机制

在使用 async/await 时，错误处理通常通过 try/catch 块来实现。try 块中包含可能抛出错误的代码，而 catch 块用于捕获并处理这些错误。

3. fetch 请求中的错误处理

在 fetch 请求中，即使请求成功返回，也可能由于网络问题或服务器返回的状态码不是 2xx 而导致错误。因此，在 await fetch 之后，通常会检查 response.ok 属性，以确保请求成功。

4. 重新抛出错误

在 catch 块中，可以选择重新抛出错误，以便调用者能够进一步处理错误。如果不重新抛出错误，调用者将不会知道发生了什么问题。

5. 使用示例

在示例中，fetchData 函数尝试从 API 获取数据。如果成功，数据将被返回；如果失败，错误将被捕获并记录到控制台。调用者可以通过 .then 和 .catch 来处理成功或失败的情况。

6. 注意事项

• await 只能在 async 函数中使用。
• try/catch 块只能捕获同步代码和 await 表达式中的错误，不能捕获异步回调中的错误。
• 如果 fetch 请求失败（例如网络错误），await fetch 将直接抛出错误，进入 catch 块。