以优雅的方式编写Promise和Async/Await，告别JavaScript回调地狱

前端

2024-01-01 15:50:02

前言

JavaScript中的异步编程是一个非常重要的概念，它允许我们编写能够在后台运行的任务，而不会阻塞主线程。这对于编写响应式和用户友好的应用程序非常重要。

在JavaScript中，有几种不同的方法可以实现异步编程。最常见的方法之一是使用回调函数。回调函数是一种在异步任务完成后被调用的函数。

然而，使用回调函数可能会导致代码变得难以阅读和维护，因为代码中到处都是嵌套的回调函数，这被称为“回调地狱”。

为了解决这个问题，ES6引入了Promise和Async/Await，它们是两种更现代、更优雅的方式来处理异步编程。

Promise

Promise是一个对象，它代表一个异步操作的最终完成或失败。Promise有三种状态：

Pending： 异步操作尚未完成。
Fulfilled： 异步操作已成功完成。
Rejected： 异步操作已失败。

您可以使用.then()方法来处理Promise的状态。.then()方法接受两个参数：

第一个参数： 在Promise被Fulfilled时被调用的函数。
第二个参数： 在Promise被Rejected时被调用的函数。

例如，以下代码演示了如何使用Promise来获取一个用户的详细信息：

const getUserDetails = userId => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId === 1) {
        resolve({ name: 'John Doe', age: 30 });
      } else {
        reject(new Error('User not found'));
      }
    }, 1000);
  });
};

getUserDetails(1)
  .then(userDetails => {
    console.log(`User details: ${JSON.stringify(userDetails)}`);
  })
  .catch(error => {
    console.error(error.message);
  });

Async/Await

Async/Await是ES8中引入的一组，它允许您编写异步代码，就像编写同步代码一样。

为了使用Async/Await，您需要使用async关键字来定义一个函数。async函数返回一个Promise。

您可以在async函数中使用await关键字来等待Promise被Fulfilled或Rejected。

例如，以下代码演示了如何使用Async/Await来获取一个用户的详细信息：

async function getUserDetails(userId) {
  const userDetails = await Promise.resolve({ name: 'John Doe', age: 30 });
  console.log(`User details: ${JSON.stringify(userDetails)}`);
}

getUserDetails(1);