Promise：解锁异步编程的利器，告别回调地狱

2023-10-12 13:15:52

众所周知，Promise解决了回调地狱的问题。提到回调地狱，我们很容易联想到下面这张容易让人产生误解的图片：

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

getUser(1, (user) => {
  console.log(user.name); // John Doe

  getPosts(user.id, (posts) => {
    console.log(posts); // [{ id: 1, title: 'Hello, world!' }, ...]

    getComments(posts[0].id, (comments) => {
      console.log(comments); // [{ id: 1, text: 'Great post!' }, ...]
    });
  });
});

这也算嵌套，虽然好像不是特别美观，但我们并不会觉得这有什么问题，因为我们经常会写出类似的代码。

在这个例子中的嵌套的问题仅仅是缩进的问题，而缩进除了会让代码变宽可能会造成读取困难外，并没有什么实质性的问题。

但如果我们继续深入嵌套下去，问题就来了：

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

getUser(1, (user) => {
  console.log(user.name); // John Doe

  getPosts(user.id, (posts) => {
    console.log(posts); // [{ id: 1, title: 'Hello, world!' }, ...]

    getComments(posts[0].id, (comments) => {
      console.log(comments); // [{ id: 1, text: 'Great post!' }, ...]

      getReplies(comments[0].id, (replies) => {
        console.log(replies); // [{ id: 1, text: 'I agree!' }, ...]

        getLikes(replies[0].id, (likes) => {
          console.log(likes); // [{ id: 1, user: 'John Doe' }, ...]
        });
      });
    });
  });
});

这种嵌套就非常难以阅读和维护了，这就是所谓的“回调地狱”。

Promise的出现就是为了解决这个问题。它为我们提供了一种更优雅、更易于管理的方式来处理异步操作。

使用Promise，我们可以将异步操作封装成一个对象，并在该操作完成后得到通知，从而使代码更具可读性和可维护性。

例如，我们可以将上面的代码重写为以下形式：

getUser(1)
  .then((user) => {
    console.log(user.name); // John Doe

    return getPosts(user.id);
  })
  .then((posts) => {
    console.log(posts); // [{ id: 1, title: 'Hello, world!' }, ...]

    return getComments(posts[0].id);
  })
  .then((comments) => {
    console.log(comments); // [{ id: 1, text: 'Great post!' }, ...]

    return getReplies(comments[0].id);
  })
  .then((replies) => {
    console.log(replies); // [{ id: 1, text: 'I agree!' }, ...]

    return getLikes(replies[0].id);
  })
  .then((likes) => {
    console.log(likes); // [{ id: 1, user: 'John Doe' }, ...]
  });