从头理解 Promise 链式调用

前端

2024-01-10 04:11:51

一、揭开 Promise 的面纱

了解 Promise 链式调用，首先需要掌握 Promise 的本质。Promise 本质上是一个对象，它代表一个即将完成（或已经完成）的异步操作。Promise 有三种状态：

待定态（Pending）：初始状态，表示异步操作尚未完成。
已完成态（Fulfilled）：表示异步操作成功完成，并提供了一个结果值。
已拒绝态（Rejected）：表示异步操作失败，并提供了一个错误原因。

二、Promise 链式调用原理

Promise 链式调用是一种将多个 Promise 对象连接在一起的方式，使它们能够顺序执行。

1. then() 方法的秘密

Promise 的 then() 方法是 Promise 链式调用的核心。then() 方法接受两个参数：

onFulfilled：一个函数，当 Promise 成功完成时被调用。
onRejected：一个函数，当 Promise 失败时被调用。

then() 方法返回一个新的 Promise，这个新的 Promise 的状态取决于 onFulfilled 和 onRejected 的返回值。

如果 onFulfilled 返回一个 Promise，则新的 Promise 的状态由该 Promise 的状态决定。
如果 onFulfilled 返回一个非 Promise 值，则新的 Promise 的状态为已完成态，值为 onFulfilled 的返回值。
如果 onRejected 返回一个 Promise，则新的 Promise 的状态由该 Promise 的状态决定。
如果 onRejected 返回一个非 Promise 值，则新的 Promise 的状态为已拒绝态，值为 onRejected 的返回值。

2. 链式调用的奥秘

Promise 链式调用就是将多个 Promise 对象的 then() 方法连接在一起，形成一个链式结构。当一个 Promise 完成时，它的 then() 方法返回的 Promise 就开始执行。这样，就可以实现多个异步操作的顺序执行。

三、实例揭秘：Promise 链式调用的实际操作

为了更直观地理解 Promise 链式调用，我们来看一个实际的例子。

// 创建一个 Promise 对象
const promise1 = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    resolve('成功');
  }, 2000);
});

// 使用 then() 方法创建一个 Promise 链式调用
promise1.then((result) => {
  console.log('第一个 Promise 成功，结果为：', result);
  // 返回另一个 Promise
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      resolve('成功2');
    }, 1000);
  });
}).then((result) => {
  console.log('第二个 Promise 成功，结果为：', result);
}).catch((error) => {
  console.error('Promise 失败，原因：', error);
});

在这个例子中，我们创建了两个 Promise 对象，并使用 then() 方法将它们连接在一起，形成了一个 Promise 链式调用。

第一个 Promise 对象模拟了一个耗时 2 秒的异步操作，当操作完成后，它调用 resolve() 函数将结果值'成功'传递给 then() 方法的第一个参数 onFulfilled。
第二个 Promise 对象模拟了一个耗时 1 秒的异步操作，当操作完成后，它也调用 resolve() 函数将结果值'成功2'传递给 then() 方法的第一个参数 onFulfilled。

通过这个例子，我们可以看到，Promise 链式调用可以将多个异步操作连接在一起，并顺序执行。当一个 Promise 完成时，它的 then() 方法返回的 Promise 就开始执行。这样，我们就能够轻松地实现异步操作的串行执行。