使用前端async和await解除回调地狱

2024-02-20 13:11:32

前言

之前我有分享过Promise.then()已经可以很好的解决回调地狱问题，这篇我分享的async和await，虽然也使用到了Promise，但是语法更加简洁，而且可以很好地和try/catch结合起来处理错误。

什么是回调地狱

在前端开发中，异步操作是不可避免的，比如网络请求、定时器等。这些异步操作会带来回调地狱问题，使代码变得难以阅读和维护。

回调地狱是一个形象的比喻，用来当在一个异步操作的回调函数中调用另一个异步操作时，导致代码结构像地狱一样难以理解。

以下是一个典型的回调地狱示例：

function getUser(id, callback) {
  setTimeout(() => {
    callback({
      id: id,
      name: 'John Doe'
    });
  }, 1000);
}

function getPosts(userId, callback) {
  setTimeout(() => {
    callback([
      {
        id: 1,
        title: 'Post 1'
      },
      {
        id: 2,
        title: 'Post 2'
      }
    ]);
  }, 1000);
}

getUser(1, function(user) {
  getPosts(user.id, function(posts) {
    console.log(user.name + '\'s posts:', posts);
  });
});

在这个示例中，我们首先调用getUser函数来获取用户信息，然后在getUser函数的回调函数中调用getPosts函数来获取用户的所有文章。这种嵌套的回调结构非常难以阅读和维护。

async和await

async和await是ES2017引入的两个新的语法特性，可以帮助我们解决回调地狱问题。

async函数是一个特殊的函数，它可以返回一个Promise对象。await可以暂停async函数的执行，直到Promise对象被解析。

以下是如何使用async和await重写上面的示例：

async function getUser(id) {
  const user = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        id: id,
        name: 'John Doe'
      });
    }, 1000);
  });

  return user;
}

async function getPosts(userId) {
  const posts = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([
        {
          id: 1,
          title: 'Post 1'
        },
        {
          id: 2,
          title: 'Post 2'
        }
      ]);
    }, 1000);
  });

  return posts;
}

async function main() {
  const user = await getUser(1);
  const posts = await getPosts(user.id);

  console.log(user.name + '\'s posts:', posts);
}

main();

在这个示例中，我们首先定义了两个async函数getUser和getPosts。这两个函数都返回一个Promise对象。然后，我们定义了main函数，它也是一个async函数。在main函数中，我们首先调用getUser函数来获取用户信息，然后调用getPosts函数来获取用户的所有文章。由于main函数是一个async函数，我们可以使用await关键字来暂停函数的执行，直到getUser和getPosts函数返回的Promise对象被解析。