代码里的混乱，埋藏无数 Bug 的源头——回调嵌套

2024-01-30 15:58:18

代码里的混乱，埋藏无数 Bug 的源头——回调嵌套

在软件开发过程中，回调函数无处不在，尤其是在 JavaScript 中，回调函数更是随处可见。回调函数本身并没有什么问题，但嵌套的回调函数就显得有些让人头疼了。

嵌套的回调函数可读性差，不利于错误处理，极容易埋下 Bug 的隐患。

我们来看一个例子：

function getUserInfo(userId, callback) {
  // 模拟异步获取用户信息
  setTimeout(() => {
    const user = {
      id: userId,
      name: 'John Doe',
    };
    callback(user);
  }, 1000);
}

function getPostsByUser(userId, callback) {
  // 模拟异步获取用户帖子
  setTimeout(() => {
    const posts = [
      {
        id: 1,
        title: 'My First Post',
        content: 'Hello, world!',
      },
      {
        id: 2,
        title: 'My Second Post',
        content: 'This is my second post.',
      },
    ];
    callback(posts);
  }, 1000);
}

function displayUserInfoAndPosts(userId) {
  // 获取用户信息
  getUserInfo(userId, (user) => {
    // 获取用户帖子
    getPostsByUser(userId, (posts) => {
      // 显示用户信息和帖子
      console.log(user);
      console.log(posts);
    });
  });
}

displayUserInfoAndPosts(1);

在这个例子中，我们嵌套了两个回调函数，用来获取用户信息和用户帖子。这种代码结构可读性很差，而且不利于错误处理。

如果我们想在获取用户信息或用户帖子时出错，那么我们需要在每个回调函数中分别处理错误。这样一来，代码就会变得更加复杂和难以维护。

Promise 的出现为我们带来了曙光

Promise 是 JavaScript 中用来处理异步操作的类。它使用起来非常简单，大大减少了代码量，并且可以更好的处理错误。

正因如此，各大主流框架纷纷拥抱了 Promise。

我们来看一个使用 Promise 的例子：

function getUserInfo(userId) {
  // 返回一个 Promise 对象
  return new Promise((resolve, reject) => {
    // 模拟异步获取用户信息
    setTimeout(() => {
      const user = {
        id: userId,
        name: 'John Doe',
      };
      resolve(user);
    }, 1000);
  });
}

function getPostsByUser(userId) {
  // 返回一个 Promise 对象
  return new Promise((resolve, reject) => {
    // 模拟异步获取用户帖子
    setTimeout(() => {
      const posts = [
        {
          id: 1,
          title: 'My First Post',
          content: 'Hello, world!',
        },
        {
          id: 2,
          title: 'My Second Post',
          content: 'This is my second post.',
        },
      ];
      resolve(posts);
    }, 1000);
  });
}

function displayUserInfoAndPosts(userId) {
  // 使用 Promise.all() 方法并行获取用户信息和用户帖子
  Promise.all([getUserInfo(userId), getPostsByUser(userId)]).then(([user, posts]) => {
    // 显示用户信息和帖子
    console.log(user);
    console.log(posts);
  }).catch((error) => {
    // 处理错误
    console.error(error);
  });
}

displayUserInfoAndPosts(1);