1. 明确需求

在 Promise 中，then 方法和 catch 方法都是可以通过链式调用这种形式无限调用下去的。

所以考虑以下几个改造点：

  • then方法中应该直接把 this 给 return 出去（链式调用常规操作）；
  • 链式调用允许我们多次调用 then，多个 then 中传入的 onResolved（也叫onFulFilled） 和 onRejected 任务，我们需要把它们维护在一个队列里；
  • 要想办法确保 then 方法执行的时机，务必在 onResolved 队列 和 onRejected 队列批量执行前。不然队列任务批量执行的时候，任务本身都还没收集完。一个比较容易想到的办法就是把批量执行这个动作包装成异步任务，这样就能确保它一定可以在同步代码之后执行了。

2. 编码

2.1 构造函数

  1. function CutePromise(executor) {
  2.     // value 记录异步任务成功的执行结果
  3.     this.value = null;
  4.     // reason 记录异步任务失败的原因
  5.     this.reason = null;
  6.     // status 记录当前状态，初始化是 pending
  7.     this.status = 'pending';
  9.     // 缓存两个队列，维护 resolved 和 rejected 各自对应的处理函数
  10.     this.onResolvedQueue = [];
  11.     this.onRejectedQueue = [];
  13.     // 把 this 存下来，后面会用到
  14.     var self = this;
  16.     // 定义 resolve 函数
  17.     function resolve(value) {
  18.         // 如果不是 pending 状态，直接返回
  19.         if (self.status !== 'pending') {
  20.             return;
  21.         }
  22.         // 异步任务成功，把结果赋值给 value
  23.         self.value = value;
  24.         // 当前状态切换为 resolved
  25.         self.status = 'resolved'; 
  26.         // 用 setTimeout 延迟队列任务的执行
  27.         setTimeout(function(){
  28.             // 批量执行 resolved 队列里的任务
  29.             self.onResolvedQueue.forEach(resolved => resolved(self.value)); 
  30.         });
  31.     }
  33.     // 定义 reject 函数
  34.     function reject(reason) {
  35.         // 如果不是 pending 状态，直接返回
  36.         if (self.status !== 'pending') {
  37.             return;
  38.         }
  39.         // 异步任务失败，把结果赋值给 value
  40.         self.reason = reason; 
  41.         // 当前状态切换为 rejected
  42.         self.status = 'rejected';
  43.         // 用 setTimeout 延迟队列任务的执行
  44.         setTimeout(function(){
  45.             // 批量执行 rejected 队列里的任务
  46.             self.onRejectedQueue.forEach(rejected => rejected(self.reason));
  47.         });
  48.     }
  50.     // 把 resolve 和 reject 能力赋予执行器
  51.     try{
  52.         execute(resolve, reject)
  53.          }catch(e){
  54.         reject(e)
  55.       }
  56. }

2.2 then 方法

  1. // then 方法接收两个函数作为入参（可选）
  2. CutePromise.prototype.then = function(onResolved, onRejected) {
  4.     // 注意，onResolved 和 onRejected必须是函数；如果不是，我们此处用一个透传来兜底
  5.     if (typeof onResolved !== 'function') {
  6.         onResolved = function(x) {return x};
  7.     }
  8.     if (typeof onRejected !== 'function') {
  9.         onRejected = function(e) {throw e};
  10.     }
  12.     // 依然是保存 this
  13.     var self = this;
  14.     // 判断是否是 resolved 状态
  15.     if (self.status === 'resolved') {
  16.         // 如果是 执行对应的处理方法
  17.         onResolved(self.value);
  18.     } else if (self.status === 'rejected') {
  19.         // 若是 rejected 状态，则执行 rejected 对应方法
  20.         onRejected(self.reason);
  21.     } else if (self.status === 'pending') {
  22.         // 若是 pending 状态，则只对任务做入队处理
  23.         self.onResolvedQueue.push(onResolved);
  24.         self.onRejectedQueue.push(onRejected);
  25.     }
  26.     return this
  27. };

3. 测试

  1. const cutePromise = new CutePromise(function (resolve, reject) {
  2.     resolve('成了！');
  3. });
  4. cutePromise.then((value) => {
  5.     console.log(value)
  6.     console.log('我是第 1 个任务')
  7. }).then(value => {
  8.     console.log('我是第 2 个任务')
  9. });
  10. // 依次输出“成了！” “我是第 1 个任务” “我是第 2 个任务”

image.png