巧用 Promise 踏入 JavaScript 的异步世界

2023-10-24 02:14:00

一、Promise 的诞生：告别回调地狱

在 JavaScript 中，异步操作无处不在，例如网络请求、定时器、文件读写等。传统上，我们使用回调函数来处理异步操作的结果。然而，当异步操作层层嵌套时，回调函数就会像多米诺骨牌一样层层累积，形成难以维护的“回调地狱”。

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

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

function displayPosts(posts) {
  console.log(posts);
}

getUserName(1, (err, user) => {
  if (err) {
    // Handle error
  } else {
    getUserPosts(user.id, (err, posts) => {
      if (err) {
        // Handle error
      } else {
        displayPosts(posts);
      }
    });
  }
});

二、Promise 的闪亮登场：让异步编程更优雅

为了解决回调地狱的困扰，Promise 应运而生。Promise 是一个对象，它代表了一个异步操作的最终结果，可能是成功，也可能是失败。Promise 有三种状态：

pending（进行中）：异步操作尚未完成。
fulfilled（已完成）：异步操作已成功完成，并且结果已经可用。
rejected（已拒绝）：异步操作已失败，并且错误信息已经可用。

Promise 的强大之处在于它提供了 then 方法和 catch 方法来处理异步操作的结果。then 方法用于处理成功的异步操作，而 catch 方法用于处理失败的异步操作。这两个方法都返回一个新的 Promise，这使得 Promise 可以轻松地进行链式调用。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve({ name: 'John Doe' });
  }, 1000);
});

promise
  .then((result) => {
    console.log(result); // { name: 'John Doe' }
  })
  .catch((error) => {
    console.error(error);
  });

三、Promise 的链式调用：让代码更具可读性

Promise 的链式调用是其一大亮点。我们可以使用 then 方法将多个异步操作串联起来，形成一个异步操作的流水线。这使得代码更加简洁，可读性也大大提高。

const promise1 = new Promise((resolve, reject) => {
  // 异步操作 1
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  // 异步操作 2
  setTimeout(() => {
    resolve('Promise 2 resolved');
  }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
  // 异步操作 3
  setTimeout(() => {
    resolve('Promise 3 resolved');
  }, 3000);
});

promise1
  .then((result) => {
    console.log(result); // 'Promise 1 resolved'
    return promise2;
  })
  .then((result) => {
    console.log(result); // 'Promise 2 resolved'
    return promise3;
  })
  .then((result) => {
    console.log(result); // 'Promise 3 resolved'
  });