使用 Await 简化复杂回调函数嵌套问题

2023-11-22 18:24:14

前端开发的痛：回调函数嵌套

随着前端开发的日益复杂，异步操作变得越来越普遍。为了处理异步操作，我们通常使用回调函数，即在异步操作完成后执行的函数。然而，当异步操作嵌套时，回调函数就会像俄罗斯套娃一样一层一层嵌套，代码的可读性和可维护性大大降低。

例如，以下代码演示了如何使用嵌套回调函数来处理一个简单的异步操作：

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

function getPosts(userId, callback) {
  setTimeout(() => {
    callback([
      {
        title: 'Post 1',
        content: 'This is the first post.'
      },
      {
        title: 'Post 2',
        content: 'This is the second post.'
      }
    ]);
  }, 1000);
}

function displayUserAndPosts() {
  getUser((user) => {
    getPosts(user.id, (posts) => {
      console.log(`User: ${user.name}, Age: ${user.age}`);
      console.log('Posts:');
      posts.forEach((post) => {
        console.log(`\t${post.title}: ${post.content}`);
      });
    });
  });
}

displayUserAndPosts();

这个代码示例中，getUser() 函数获取一个用户，并将结果传递给 getPosts() 函数，getPosts() 函数获取该用户的所有帖子，并将结果传递给 displayUserAndPosts() 函数。displayUserAndPosts() 函数最终将用户和帖子信息打印到控制台。

正如您所看到的，这个代码示例中存在两个嵌套的回调函数，这使得代码难以阅读和维护。如果我们继续添加更多的异步操作，回调函数的嵌套将变得更加复杂，最终导致代码难以维护。

Await/Async 的出现：简化回调函数嵌套

ES7 中引入的 await/async 可以简化回调函数的嵌套，让异步代码看起来就像同步代码一样。Await/Async 的基本用法如下：

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

  console.log(`User: ${user.name}, Age: ${user.age}`);
  console.log('Posts:');
  posts.forEach((post) => {
    console.log(`\t${post.title}: ${post.content}`);
  });
}

displayUserAndPosts();

在这个代码示例中，我们使用了 async 将 displayUserAndPosts() 函数标记为一个异步函数。在异步函数中，我们可以使用 await 关键字来等待异步操作的完成。

await 关键字后面的表达式必须是一个 Promise 对象。当 await 表达式被执行时，JavaScript 引擎会暂停该函数的执行，直到 Promise 对象被解析或拒绝。一旦 Promise 对象被解析或拒绝，JavaScript 引擎会继续执行该函数。

在上面的代码示例中，我们使用 await 关键字等待 getUser() 和 getPosts() 函数返回的 Promise 对象被解析。一旦这两个 Promise 对象被解析，JavaScript 引擎会继续执行 displayUserAndPosts() 函数，并将用户和帖子信息打印到控制台。