Promse对象（2）：探究链式调用中的秘密

2023-09-10 15:45:48

序言：重温 Promise 基本概念

在上一篇文章中，我们学习了 Promise 对象的基础知识，包括创建 Promise 对象、处理 Promise 状态以及使用 then 方法来处理 Promise 结果。这一次，我们将把目光聚焦于 Promise 的链式调用，探究其背后的奥秘，并学习如何利用链式调用来构建更为复杂的异步编程逻辑。

揭秘链式调用：从原理到技巧

原理一览：揭示 Promise 链式调用的本质

Promise 的链式调用本质上是一种将多个 Promise 对象串联起来的技术。当一个 Promise 对象的状态改变时，它会触发下一个 Promise 对象的执行，如此循环往复，直到所有 Promise 对象都完成或失败。这种串联关系可以让我们以一种简洁而优雅的方式来处理复杂的异步任务。

技巧一览：掌握链式调用的关键点

为了熟练运用链式调用，我们需要掌握几个关键技巧：

了解 Promise 状态：在使用链式调用时，我们需要时刻牢记 Promise 的状态。只有当一个 Promise 对象的状态变为已完成（resolved）或已失败（rejected）时，它的后续 Promise 对象才会被触发执行。
使用 then 方法：then 方法是实现 Promise 链式调用的核心工具。它允许我们在一个 Promise 对象的状态改变时执行指定的回调函数，并将结果传递给下一个 Promise 对象。
返回一个新的 Promise 对象：在 then 方法中，我们需要返回一个新的 Promise 对象。这个新的 Promise 对象的状态取决于我们指定的回调函数的执行结果。如果回调函数执行成功，则新的 Promise 对象的状态将变为已完成；如果回调函数执行失败，则新的 Promise 对象的状态将变为已失败。

实例解析：领略链式调用的实际应用

为了更好地理解链式调用，让我们通过一个实例来演示其实际应用。假设我们有一个异步函数 getUserName，它根据提供的用户 ID 获取用户的姓名。我们希望在获取到用户姓名后，再使用另一个异步函数 getUserAvatar 来获取该用户的头像。我们可以使用 Promise 的链式调用来实现这个需求：

function getUserName(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId === 1) {
        resolve('John Doe');
      } else {
        reject(new Error('User not found'));
      }
    }, 1000);
  });
}

function getUserAvatar(userName) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userName === 'John Doe') {
        resolve('avatar.png');
      } else {
        reject(new Error('Avatar not found'));
      }
    }, 1000);
  });
}

getUserName(1)
  .then((userName) => {
    return getUserAvatar(userName);
  })
  .then((userAvatar) => {
    console.log(`User name: ${userName}, Avatar: ${userAvatar}`);
  })
  .catch((error) => {
    console.error(error);
  });