利用Async/Await优雅的处理错误

2023-12-28 18:26:45

在很长一段时间里面，FE们不得不依靠回调来处理异步代码。使用回调的结果是，代码变得很纠结，不便于理解与维护，值得庆幸的是Promise带来了.then()，让代码变得井然有序，便于管理。于是我们大量使用，代替了原来的回调方式。但是不存在一种方法可以让当前的执行流程阻塞直到pro…

Async/Await

Async/Await是JavaScript中用来处理异步代码的语法糖，它可以使代码更加简洁、易读。Async/Await基于Promise，但它使用了一种更简单的方式来编写代码。

例如，以下代码使用回调来处理异步代码：

function getData(callback) {
  setTimeout(() => {
    callback(null, { data: 'Hello, world!' });
  }, 1000);
}

getData((err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
});

这段代码首先定义了一个函数getData，该函数接受一个回调函数作为参数。然后，getData函数调用setTimeout函数，该函数将在1秒后执行回调函数。回调函数接受两个参数：err和data。err是错误对象，data是异步操作返回的数据。

如果在异步操作期间发生错误，则err将被设置为错误对象。否则，err将为null。data将被设置为异步操作返回的数据。

然后，getData函数调用回调函数，并将err和data作为参数传递给它。回调函数首先检查err是否为null。如果不是，则它将错误消息打印到控制台。否则，它将数据打印到控制台。

以下代码使用Async/Await来处理相同的异步代码：

async function getData() {
  try {
    const data = await setTimeout(() => {
      return { data: 'Hello, world!' };
    }, 1000);
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

getData();