分步推导Promise

用户80613816659
1 阅读8分钟

—— 分步推导法详解：从简单到复杂，逐步增强

目标读者：已经理解异步编程，但想彻底掌握 Promise 原理的前端开发者
学习方式：分步构建 + 问题驱动 + 实战测试

✅ 前言：为什么你要亲手写一个 Promise？

你可能已经会用 Promise：

fetch('/api').then(data => console.log(data));

但当你看到 .then().then() 链式调用、resolvePromise 的递归逻辑时，总觉得“看得懂，写不出”。

这很正常。

🔑 真正的掌握 = 能从零构建

本教程将带你用「分步推导法」一步步从最简单的 Promise 开始，不断发现问题、解决问题，最终实现一个符合 Promises/A+ 规范 的完整 MyPromise。

🧱 第一步：最简版 Promise（只支持同步 resolve）

目标功能：

const p = new MyPromise(resolve => {
  resolve("hello");
});
p.then(value => console.log(value)); // 输出: hello

实现代码：

class MyPromise {
  constructor(executor) {
    this.status = 'pending';
    this.value = undefined;

    const resolve = (value) => {
      this.status = 'fulfilled';
      this.value = value;
    };

    executor(resolve);
  }

  then(onFulfilled) {
    if (this.status === 'fulfilled') {
      onFulfilled(this.value);
    }
  }
}

✅ 当前能力：

  • 支持 new MyPromise
  • 支持 .then 接收成功回调
  • 状态机基本成型

❌ 存在问题：

  1. 不支持异步操作（如 setTimeout）
  2. 没有失败处理
  3. .then 回调是同步执行的（不符合规范）
  4. 不支持链式调用

⏳ 第二步：支持异步 resolve（加入回调缓存机制）

新需求：

const p = new MyPromise(resolve => {
  setTimeout(() => resolve("延迟数据"), 1000);
});
p.then(console.log); // 1秒后输出

核心思路：发布-订阅模式

  • 如果还在 pending，不能立即执行 .then 回调
  • 先把回调存起来 → 等 resolve 被调用时再触发

升级代码：

class MyPromise {
  constructor(executor) {
    this.status = 'pending';
    this.value = undefined;
    this.onFulfilledCallbacks = []; // 缓存成功回调

    const resolve = (value) => {
      this.status = 'fulfilled';
      this.value = value;
      // 触发所有缓存的回调
      this.onFulfilledCallbacks.forEach(fn => fn());
    };

    executor(resolve);
  }

  then(onFulfilled) {
    if (this.status === 'fulfilled') {
      onFulfilled(this.value);
    } else if (this.status === 'pending') {
      // 还没完成，先存起来
      this.onFulfilledCallbacks.push(() => {
        onFulfilled(this.value);
      });
    }
  }
}

✅ 新增能力：

  • 支持异步 resolve
  • 使用 onFulfilledCallbacks 实现“订阅-发布”机制

❌ 还有问题：

  1. 不支持 reject 和失败回调
  2. .then 回调是同步执行的（应异步）
  3. 不支持链式调用（.then().then()）

🛠️ 第三步：添加 reject 和错误处理

新需求：

const p = new MyPromise((resolve, reject) => {
  reject("出错了！");
});
p.then(null, err => console.log(err)); // 输出: 出错了！

升级代码：

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class MyPromise {
  constructor(executor) {
    this.status = PENDING;
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = []; // 新增失败回调数组

    const resolve = (value) => {
      if (this.status === PENDING) {
        this.status = FULFILLED;
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };

    const reject = (reason) => {
      if (this.status === PENDING) {
        this.status = REJECTED;
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };

    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err); // 捕获 executor 中的错误
    }
  }

  then(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
      onFulfilled(this.value);
    } else if (this.status === REJECTED) {
      onRejected(this.reason);
    } else if (this.status === PENDING) {
      this.onFulfilledCallbacks.push(() => onFulfilled(this.value));
      this.onRejectedCallbacks.push(() => onRejected(this.reason));
    }
  }
}

✅ 新增能力：

  • 支持 reject
  • 支持 .then(success, fail)
  • 捕获 executor 内部错误

❌ 还有问题：

  1. .then 回调是同步执行的（违反规范）
  2. 不支持链式调用
  3. 不处理未传回调的情况

⏱️ 第四步：确保 .then 异步执行（使用 setTimeout 模拟微任务）

规范要求：

.then 回调必须是 异步执行，即使 Promise 已经完成。

否则会出现行为不一致。

升级 then 方法：

then(onFulfilled, onRejected) {
  // 默认值处理
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val;
  onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };

  if (this.status === FULFILLED) {
    setTimeout(() => {
      onFulfilled(this.value);
    }, 0);
  } else if (this.status === REJECTED) {
    setTimeout(() => {
      onRejected(this.reason);
    }, 0);
  } else if (this.status === PENDING) {
    this.onFulfilledCallbacks.push(() => {
      setTimeout(() => {
        onFulfilled(this.value);
      }, 0);
    });
    this.onRejectedCallbacks.push(() => {
      setTimeout(() => {
        onRejected(this.reason);
      }, 0);
    });
  }
}

✅ 新增能力：

  • .then 回调总是异步执行
  • 符合 Promises/A+ 规范

🔗 第五步：实现链式调用（返回新 Promise）

新需求：

p.then(res => res * 2)
 .then(result => console.log(result)); // 应该输出 4

核心思想：

.then 必须返回一个 新的 Promise，它的状态由回调函数的返回值决定。

升级 then：

then(onFulfilled, onRejected) {
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val;
  onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };

  const promise2 = new MyPromise((resolve, reject) => {
    if (this.status === FULFILLED) {
      setTimeout(() => {
        try {
          const x = onFulfilled(this.value);
          resolve(x); // 简化版：直接 resolve 返回值
        } catch (e) {
          reject(e);
        }
      }, 0);
    } else if (this.status === REJECTED) {
      setTimeout(() => {
        try {
          const x = onRejected(this.reason);
          reject(x); // 注意：这里应该是 resolve？还是 reject？
        } catch (e) {
          reject(e);
        }
      }, 0);
    } else if (this.status === PENDING) {
      this.onFulfilledCallbacks.push(() => {
        setTimeout(() => {
          try {
            const x = onFulfilled(this.value);
            resolve(x);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
      this.onRejectedCallbacks.push(() => {
        setTimeout(() => {
          try {
            const x = onRejected(this.reason);
            reject(x);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
    }
  });

  return promise2;
}

❌ 问题暴露：

  • 如果 x 是另一个 Promise，应该等它完成，而不是直接 resolve(x)
  • 错误处理不统一

🌟 第六步：实现 resolvePromise（核心解析过程）

最终目标：能正确处理各种返回值

返回值类型行为
基本类型直接 resolve
对象/函数判断是否 thenable
Promise等待其结果
自身报错（循环引用）

添加 resolvePromise 方法：

resolvePromise(promise2, x, resolve, reject) {
  // 1. 循环引用检测
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected'));
  }

  let called = false; // 防止多次调用 resolve/reject

  // 2. 只有对象或函数才可能是 thenable
  if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      const then = x.then;

      // 3. 如果有 then 方法，认为是 Promise/thenable
      if (typeof then === 'function') {
        then.call(
          x,
          y => {
            if (called) return;
            called = true;
            // 递归解析
            this.resolvePromise(promise2, y, resolve, reject);
          },
          r => {
            if (called) return;
            called = true;
            reject(r);
          }
        );
      } else {
        // 普通对象
        resolve(x);
      }
    } catch (e) {
      if (called) return;
      called = true;
      reject(e);
    }
  } else {
    // 基本类型
    resolve(x);
  }
}

在 then 中调用它：

// 替换原来的 resolve(x)
this.resolvePromise(promise2, x, resolve, reject);

✅ 第七步：完善其他方法

catch 方法

catch(onRejected) {
  return this.then(null, onRejected);
}

Promise.resolve

static resolve(value) {
  return new MyPromise(resolve => resolve(value));
}

Promise.reject

static reject(reason) {
  return new MyPromise((_, reject) => reject(reason));
}

Promise.all

static all(promises) {
  return new MyPromise((resolve, reject) => {
    const results = [];
    let count = 0;

    if (promises.length === 0) return resolve(results);

    for (let i = 0; i < promises.length; i++) {
      MyPromise.resolve(promises[i]).then(
        value => {
          results[i] = value;
          count++;
          if (count === promises.length) resolve(results);
        },
        reject // 任意一个失败就整体失败
      );
    }
  });
}

🎉 最终成果：一个完整的 MyPromise

你现在拥有了：

  • 状态机（pending/fulfilled/rejected）
  • 发布-订阅模式（回调缓存）
  • 异步调度（setTimeout）
  • 链式调用（返回新 Promise）
  • 核心解析（resolvePromise）
  • 静态方法（resolve/reject/all）

👉 它几乎可以替代原生 Promise！

💡 学习建议

  1. 不要一次性看完 → 每步停下来自己写一遍
  2. 写测试用例验证 → 看是否符合预期
  3. 删掉注释重写 → 检验是否真正掌握
  4. 对比原生 Promise → 找差异（如微任务 vs 宏任务）

📎 附录：完整代码（可运行）

[此处可插入你之前写的完整代码]

❤️ 结语

你不需要一开始就写出完美的代码。
你需要的是：从简单开始，一步步迭代，直到完美。
这就是软件工程的本质。

现在，你已经走完了这条路。

恭喜你，你不再是“只会用”的人，而是“真正懂得”的人。

✅ 下一步建议：

  • 尝试将 setTimeout 改为 queueMicrotask 实现微任务
  • 实现 finally 方法
  • 写一套测试用例验证所有边界情况

当然！以下是为 「从零实现 Promise」全过程 量身定制的 记忆小贴士（Memory Tips） ，帮你把复杂逻辑变成简单口诀、类比和图示，轻松记住核心知识点 ✅

🌟 一、Promise 核心思想口诀（3 句话记完）

🔤 “一构二态三回调，链式靠它串成桥”

分解解释：

口诀含义
一构一个构造函数 new MyPromise(executor)
二态状态只能变一次：pending → fulfilled / rejected
三回调成功、失败、等待三种情况处理 .then
链式靠它串成桥每个 .then 返回新 Promise，像链条一样连接

🧠 二、关键机制记忆法

1. onFulfilledCallbacks 是什么？

📦 “暂存柜”模型

  • 就像快递站的暂存柜
  • 你还没到 → 先把你的“取件通知”存进去
  • 到了就挨个打电话：“可以取了！”
  • 取完后记得清空柜子（执行后清空数组）

✅ 记住：pending 时存回调，resolve 时统一触发

2. resolvePromise 太绕？

🔄 “剥洋葱”法则

“遇到返回值，一层层剥，直到得到基本值”

return Promise.resolve(
  Promise.resolve(
    Promise.resolve(456)
  )
);

👉 像剥洋葱一样，一直剥到最里面那个 456

✅ 口诀：

“是自己？报错！有 then？等它！不是？直接发！”

3. 防止重复调用 resolve/reject

🔐 “开关按钮”模型

  • 第一次按下 → 开灯 ✅
  • 再按无效 ❌
  • 用 called = true 锁住

✅ 记住：只认第一次，后面全忽略

4. .then 回调为什么用 setTimeout(..., 0)？

⏱️ “异步保险”原则

即使同步 resolve，.then 也必须异步执行！

✅ 类比：

就像群里发消息：“我到了！”
不能立刻 @所有人，得等下一轮聊天开始（事件循环下一圈）

🎯 三、链式调用记忆口诀

🔄 “每 then 一次，造一个新 Promise；结果谁说了算？看 return 啥！”

你 return 的是…下一个 .then 拿到…
123123
Promise.resolve(456)等它完成后的 456
抛出错误进入 .catch
自己报错：循环引用

🧩 四、常见问题速查表（Q&A 式记忆）

问答
Q：onFulfilledCallbacks 存几个？A：可以多个！有多少 .then 就存几个
Q：resolve 能调多次吗？A：不能！只有第一次有效
Q：.then 是同步还是异步？A：总是异步（即使立即 resolve）
Q：不传 .then 的回调会怎样？A：透传值 or 抛错（默认函数处理）
Q：怎么支持 Promise.all？A：计数 + 所有成功才 resolve，任一失败立刻 reject

🖼️ 五、可视化记忆图（文字版）

       new MyPromise
           ↓
   executor(resolve, reject)
           ↓
     pending → 触发？
           ↓
   ┌───────────────┐
   ↓               ↓
fulfilled       rejected
   ↓               ↓
执行 onFulfilled   执行 onRejected
   ↓               ↓
触发所有缓存回调 → 统一通过 resolvePromise 处理返回值
                     ↓
               返回 promise2 → 支持链式调用

💡 六、终极记忆建议

每天默念一遍：

“我是一个 Promise，我有三种状态。
我能存回调，我能发通知，我能链下去。
我不惧异步，我不怕嵌套，因为我就是解决方案。”

—— 你会慢慢内化它。

如果你想要：

  • 一张 PDF 版“Promise 记忆卡片”
  • 一套 Anki 记忆卡片（用于复习）
  • 或者一个小游戏来练习

告诉我，我可以为你生成 😊

继续加油！你已经走在成为高级前端的路上了 💪✨

avatar
文章
阅读
粉丝