从异步到等待：处理错误的正确方式

2023-12-10 07:53:09

认识 Promise

在深入探讨 async/await 之前，我们需要先了解 Promise 的工作原理。Promise 是 JavaScript 中处理异步操作的一种方式。它允许你将异步操作的结果传递给其他函数，而无需使用回调函数。

Promise 有三种状态：

等待中 (Pending) ：这是 Promise 的初始状态。它表示异步操作尚未完成。
已完成 (Fulfilled) ：如果异步操作成功完成，则 Promise 将进入已完成状态。
已拒绝 (Rejected) ：如果异步操作以错误结束，则 Promise 将进入已拒绝状态。

Promise 可以使用 then() 方法来处理结果。then() 方法接受两个参数：一个用于处理已完成状态的函数，另一个用于处理已拒绝状态的函数。

例如，以下代码演示了如何使用 Promise 来获取服务器上的数据：

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

上面的代码中，fetch() 函数用于向服务器发送请求。then() 方法用于处理服务器的响应。第一个 then() 方法用于将服务器的响应转换为 JSON 对象。第二个 then() 方法用于处理转换后的 JSON 对象。catch() 方法用于处理错误。

使用 async/await 简化异步编程

async/await 是 ES8 中引入的语法，它允许你以同步的方式编写异步代码。async/await 使用 Promise 来处理异步操作，但它消除了编写回调函数的需要。

async/await 函数使用 async 进行标记。async/await 函数中的代码可以包含 await 表达式。await 表达式用于暂停 async/await 函数的执行，直到 Promise 完成。

例如，以下代码演示了如何使用 async/await 来获取服务器上的数据：

async function getData() {
  const response = await fetch('https://example.com/data.json');
  const data = await response.json();

  return data;
}

getData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

上面的代码中，getData() 函数是一个 async/await 函数。await 表达式用于暂停 getData() 函数的执行，直到 fetch() 函数完成。然后，await 表达式用于暂停 getData() 函数的执行，直到 response.json() 方法完成。

处理 async/await 函数中的错误

在 async/await 函数中处理错误时，有两种常见的方法：

使用 try/catch 块 ：try/catch 块可以用来捕获 async/await 函数中抛出的错误。
使用 catch() 方法 ：catch() 方法可以用来捕获 async/await 函数中返回的已拒绝的 Promise。

使用 try/catch 块

以下代码演示了如何使用 try/catch 块来捕获 async/await 函数中抛出的错误：

async function getData() {
  try {
    const response = await fetch('https://example.com/data.json');
    const data = await response.json();

    return data;
  } catch (error) {
    console.error(error);
  }
}

getData();

上面的代码中，try/catch 块用于捕获 getData() 函数中抛出的错误。如果 fetch() 函数或 response.json() 方法抛出错误，则错误将被捕获并记录到控制台。

使用 `catch()` 方法

以下代码演示了如何使用 catch() 方法来捕获 async/await 函数中返回的已拒绝的 Promise：

async function getData() {
  const response = await fetch('https://example.com/data.json');
  const data = await response.json();

  return data;
}

getData()
  .catch(error => {
    console.error(error);
  });