Promise：让异步任务不再地狱

2024-02-13 06:34:15

JavaScript中的Promise

JavaScript中，Promise是一个非常重要的概念，它用于处理异步操作。异步操作是指在执行过程中不立即返回结果的操作，例如网络请求、文件读取等。Promise提供了一种更优雅的方式来处理异步操作，它允许我们将异步操作的结果存储起来，以便在需要的时候使用。

回调地狱

在没有Promise之前，我们通常使用回调函数来处理异步操作。回调函数是指在异步操作完成后执行的函数。这种方式被称为回调地狱，因为它会导致代码非常臃肿和难以维护。

function getUser(id, callback) {
  // 模拟异步操作
  setTimeout(() => {
    const user = {
      id: id,
      name: 'John Doe'
    };

    // 将结果通过回调函数返回
    callback(user);
  }, 1000);
}

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

  // 嵌套另一个异步操作
  getPosts(user.id, (posts) => {
    console.log(posts); // [{ id: 1, title: 'Post 1' }, ...]

    // 再嵌套一个异步操作
    getComments(posts[0].id, (comments) => {
      console.log(comments); // [{ id: 1, content: 'Comment 1' }, ...]
    });
  });
});

上面的代码中，我们首先调用getUser函数来获取用户数据，然后在回调函数中调用getPosts函数来获取用户的帖子，最后在回调函数中调用getComments函数来获取帖子的评论。这种代码结构非常难以阅读和维护，尤其是当异步操作嵌套得更深的时候。

Promise链式调用

Promise提供了另一种处理异步操作的方式，称为链式调用。链式调用是指将多个异步操作串联起来，并在每个异步操作完成后执行相应的回调函数。这种方式可以使代码更加清晰和易于维护。

getUser(1)
  .then((user) => {
    console.log(user); // { id: 1, name: 'John Doe' }

    // 返回一个新的Promise，用于获取用户帖子
    return getPosts(user.id);
  })
  .then((posts) => {
    console.log(posts); // [{ id: 1, title: 'Post 1' }, ...]

    // 返回一个新的Promise，用于获取帖子的评论
    return getComments(posts[0].id);
  })
  .then((comments) => {
    console.log(comments); // [{ id: 1, content: 'Comment 1' }, ...]
  });