解决 ECMAScript 2019 async/await 的错误处理问题-JavaScript中文网-JavaScript教程资源分享门户

背景

在 ECMAScript 2019 中，async/await 成为了处理异步代码的一种流行方式。async/await 通过使异步代码看起来像同步代码来简化异步编程。但是，在使用 async/await 时，错误处理可能会变得困难。

问题

在使用 async/await 时，如果发生错误，错误会被抛出并中断代码的执行。这可能会导致代码中的其他异步操作不会被执行，从而导致错误处理的问题。

例如，考虑以下代码：

async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  console.log(data);
}

fetchData();

在上面的代码中，如果发生网络错误，fetch 函数将抛出一个错误。由于没有错误处理，代码将停止执行，导致后续代码不会被执行。

解决方案

为了解决 async/await 错误处理的问题，可以使用 try/catch 语句来捕获错误并进行处理。

例如，考虑以下代码：

// www.javascriptcn.com code example
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

在上面的代码中，我们使用 try/catch 语句来捕获 fetch 函数抛出的错误。如果发生错误，我们将在控制台中打印错误信息。

深度学习

使用 try/catch 语句来处理 async/await 中的错误是一种简单而有效的方式。但是，还有其他一些技巧可以帮助您更好地处理错误。

1. 使用 Promise.reject

在 async/await 中，您可以使用 Promise.reject 函数来手动抛出错误。例如：

// www.javascriptcn.com code example
async function fetchData() {
  const response = await fetch('/api/data');
  if (!response.ok) {
    return Promise.reject(new Error('Network response was not ok'));
  }
  const data = await response.json();
  console.log(data);
}

fetchData().catch(error => console.error(error));

在上面的代码中，如果 fetch 函数返回的响应不是 ok 状态，我们手动抛出一个错误。这个错误将被捕获并在控制台中打印出来。

2. 处理多个异步操作

在 async/await 中，您可以同时处理多个异步操作。例如：

// www.javascriptcn.com code example
async function fetchData() {
  try {
    const [response1, response2] = await Promise.all([
      fetch('/api/data1'),
      fetch('/api/data2')
    ]);
    const [data1, data2] = await Promise.all([
      response1.json(),
      response2.json()
    ]);
    console.log(data1, data2);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

在上面的代码中，我们同时发出两个异步请求，并等待它们都完成。然后，我们将两个响应转换为 JSON，并等待它们都完成。最后，我们打印两个数据。

3. 处理超时

在 async/await 中，您可以使用 Promise.race 函数来处理超时。例如：

// www.javascriptcn.com code example
async function fetchData() {
  const response = await Promise.race([
    fetch('/api/data'),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('Request timed out')), 5000)
    )
  ]);
  const data = await response.json();
  console.log(data);
}

fetchData().catch(error => console.error(error));

在上面的代码中，我们使用 Promise.race 函数来等待 fetch 函数完成，或者在 5 秒钟后超时。如果超时，我们手动抛出一个错误。

指导意义

在使用 async/await 时，错误处理是至关重要的。通过使用 try/catch 语句和其他技巧，您可以更好地处理错误并避免代码中断。同时，您可以使用其他技巧来处理多个异步操作和超时。

在编写 async/await 代码时，请务必考虑错误处理，并确保您的代码可以正确地处理错误。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d0ff11a941bf713422767d

解决 ECMAScript 2019 async/await 的错误处理问题

背景

问题