详细解释 Promise 的三种状态 (Pending, Fulfilled, Rejected) 及其转换过程，以及 Promise 链式调用的原理。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！今天咱们来聊聊 JavaScript 里一个挺重要的概念，Promise。这玩意儿，一开始听起来有点玄乎，但其实理解了它的本质，你会发现它能让你异步操作的代码变得更加清晰、可控。

咱们今天就深入浅出地聊聊 Promise 的三种状态、状态转换，以及那个让人又爱又恨的链式调用。

一、Promise 的三生三世：三种状态

Promise，顾名思义，就是“承诺”。承诺嘛，总得有个状态，对吧？ Promise 有三种状态，就像人有生老病死一样，是它生命周期中必经的阶段：

Pending (等待中)： 这是 Promise 的初始状态。就像你跟女神表白了，女神还没给你回复，你现在就是“等待中”状态，心里忐忑不安，不知道是喜是悲。
Fulfilled (已成功)： 这表示 Promise 已经成功完成了它的承诺。就像女神答应了你的表白，你们在一起了！你现在心情愉悦，可以做一些后续的事情，比如一起看电影、吃饭啥的。
Rejected (已失败)： 这表示 Promise 没有完成它的承诺，出错了。就像女神拒绝了你的表白，你伤心欲绝，觉得自己的人生都灰暗了。

这三种状态，可以用一个表格来总结：

状态	说明
Pending	初始状态，表示 Promise 还在等待中，结果尚未可知。
Fulfilled	成功状态，表示 Promise 已经成功完成，并且有了结果（这个结果可以是任何值，比如一个数字、一个字符串、一个对象，甚至另一个 Promise）。
Rejected	失败状态，表示 Promise 由于某种原因失败了，并且有一个失败的原因（这个原因通常是一个 Error 对象，但也可以是任何值）。

二、状态转换：从 Pending 到天堂或地狱

Promise 的状态转换是单向的，一旦状态改变，就再也回不去了。这就像人生一样，很多事情一旦发生，就无法挽回了。

从 Pending 到 Fulfilled： 当 Promise 成功完成时，它会从 Pending 状态变成 Fulfilled 状态。这个过程通常是通过调用 resolve() 函数来触发的。
从 Pending 到 Rejected： 当 Promise 遇到错误或者无法完成时，它会从 Pending 状态变成 Rejected 状态。这个过程通常是通过调用 reject() 函数来触发的。

重要提示： Promise 的状态只能改变一次，要么变成 Fulfilled，要么变成 Rejected。也就是说，一个 Promise 不可能既成功又失败，也不可能成功两次或者失败两次。

代码示例：

const myPromise = new Promise((resolve, reject) => {
  // 模拟一个异步操作，比如从服务器获取数据
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      // 成功了！
      resolve("数据获取成功！随机数：" + randomNumber);
    } else {
      // 失败了！
      reject(new Error("数据获取失败！随机数：" + randomNumber));
    }
  }, 1000); // 延迟 1 秒
});

myPromise
  .then((result) => {
    // 当 Promise 变成 Fulfilled 状态时，会执行这里的代码
    console.log("成功:", result);
  })
  .catch((error) => {
    // 当 Promise 变成 Rejected 状态时，会执行这里的代码
    console.error("失败:", error);
  });

console.log("Promise 创建完毕，等待状态改变...");

这段代码模拟了一个异步操作，通过 setTimeout 延迟 1 秒后，随机生成一个数字。如果数字大于 0.5，就调用 resolve() 函数，将 Promise 的状态变成 Fulfilled；否则，就调用 reject() 函数，将 Promise 的状态变成 Rejected。

then() 方法用于指定当 Promise 变成 Fulfilled 状态时要执行的回调函数。 catch() 方法用于指定当 Promise 变成 Rejected 状态时要执行的回调函数。

注意，then 和 catch 都是异步执行的。这意味着，即使 Promise 立即变成 Fulfilled 或 Rejected 状态，then 和 catch 里的代码也会在当前 JavaScript 代码执行完毕后，才会执行。

三、链式调用：像搭积木一样构建异步流程

Promise 最强大的特性之一就是链式调用。链式调用允许你像搭积木一样，将多个异步操作串联起来，形成一个完整的异步流程。

链式调用的原理很简单： then() 和 catch() 方法都会返回一个新的 Promise 对象。这个新的 Promise 对象的状态取决于 then() 或 catch() 方法中回调函数的返回值。

如果回调函数返回一个值： 新的 Promise 对象会立即变成 Fulfilled 状态，并且这个值会作为新的 Promise 对象的 resolve 值。
如果回调函数抛出一个错误： 新的 Promise 对象会立即变成 Rejected 状态，并且这个错误会作为新的 Promise 对象的 reject 值。
如果回调函数返回一个 Promise 对象： 新的 Promise 对象的状态会与回调函数返回的 Promise 对象的状态保持一致。也就是说，如果回调函数返回的 Promise 对象是 Fulfilled 状态，那么新的 Promise 对象也会变成 Fulfilled 状态；如果回调函数返回的 Promise 对象是 Rejected 状态，那么新的 Promise 对象也会变成 Rejected 状态。

代码示例：

function fetchData(url) {
  return new Promise((resolve, reject) => {
    // 模拟从服务器获取数据
    setTimeout(() => {
      const data = `从 ${url} 获取的数据`;
      if (url.includes("error")) {
        reject(new Error("请求 " + url + " 失败"));
      } else {
        resolve(data);
      }
    }, 500);
  });
}

fetchData("https://example.com/api/data1")
  .then((data1) => {
    console.log("数据 1:", data1);
    return fetchData("https://example.com/api/data2"); // 返回一个新的 Promise
  })
  .then((data2) => {
    console.log("数据 2:", data2);
    return fetchData("https://example.com/api/data3"); // 返回一个新的 Promise
  })
  .then((data3) => {
    console.log("数据 3:", data3);
  })
  .catch((error) => {
    console.error("发生错误:", error);
  });

在这个例子中，我们定义了一个 fetchData 函数，用于模拟从服务器获取数据。 fetchData 函数返回一个 Promise 对象，这个 Promise 对象会在 500 毫秒后变成 Fulfilled 状态，并且返回模拟的数据。

我们使用链式调用将三个 fetchData 函数串联起来。每个 then() 方法都会接收上一个 Promise 对象的 resolve 值，并返回一个新的 Promise 对象。这样，我们就可以按顺序执行多个异步操作，并且保证每个操作都在上一个操作完成后才会执行。

如果任何一个 fetchData 函数返回的 Promise 对象变成了 Rejected 状态，那么 catch() 方法就会被执行，并且接收到错误信息。

链式调用的好处：

代码更清晰易读： 链式调用可以将复杂的异步流程分解成多个小的、易于理解的步骤。
错误处理更方便： 只需要在一个 catch() 方法中处理所有可能发生的错误。
代码更易于维护： 如果需要修改异步流程，只需要修改相应的 then() 或 catch() 方法即可。

更深层次的理解：Promise 的内部机制

虽然我们一直在用 then 和 catch，但有没有想过，它们到底是怎么运作的呢？这就涉及到 Promise 的内部机制，也就是所谓的 "job queue"。

当一个 Promise 的状态从 pending 变为 fulfilled 或 rejected 时，相关的 then 或 catch 回调函数并不会立即执行。它们会被放入一个 "job queue" 中。 JavaScript 引擎会在当前执行栈清空后，再从 job queue 中取出回调函数来执行。

这个机制保证了 Promise 的回调函数总是异步执行的，即使 Promise 的状态已经确定。这避免了一些潜在的问题，比如在 Promise 的回调函数中修改状态，导致无限循环。

代码示例（证明 Promise 回调是异步执行的）:

const promise = new Promise((resolve) => {
  console.log("Promise 创建");
  resolve("Promise 完成");
});

promise.then((value) => {
  console.log("Then 回调:", value);
});

console.log("同步代码执行完毕");

// 输出结果:
// Promise 创建
// 同步代码执行完毕
// Then 回调: Promise 完成

从输出结果可以看出，"Then 回调" 是在 "同步代码执行完毕" 之后才执行的，这证明了 Promise 的回调函数是异步执行的。

总结：

Promise 是 JavaScript 中处理异步操作的重要工具。理解 Promise 的三种状态、状态转换以及链式调用的原理，可以帮助你编写更清晰、更可控的异步代码。

记住，Promise 就像你的人生，充满了等待 (Pending)、成功 (Fulfilled) 和失败 (Rejected)。但重要的是，你要勇敢面对，不断前进！

一些常见的问题：

为什么要有 Promise？ Promise 解决了传统回调函数的一些问题，比如回调地狱 (callback hell)，让异步代码更易于管理和维护。
async/await 和 Promise 有什么关系？ async/await 是基于 Promise 的语法糖，它让异步代码看起来更像同步代码，更容易理解。 async 函数总是返回一个 Promise 对象。
如何处理多个 Promise 并发执行？ 可以使用 Promise.all() 或 Promise.race() 方法。 Promise.all() 会等待所有 Promise 都变成 Fulfilled 状态，或者其中一个变成 Rejected 状态。 Promise.race() 会在第一个 Promise 变成 Fulfilled 或 Rejected 状态时，立即返回结果。

希望今天的讲解对大家有所帮助。大家可以多多练习，才能真正掌握 Promise 的用法。下次有机会再和大家分享更多关于 JavaScript 的知识！谢谢大家！

发表回复 取消回复

发表回复取消回复