手撕 Promise 源码

[HerokunTan]

实现一个支持链式操作 promise.then(f1).then(f2).then(f3) 的 Promise

const PENDING = "pending";
const FULLFILLED = "fullfilled";
const REJECTED = "rejected";

function MyPromise(callback) {
  const _this = this;
  _this.status = PENDING;
  _this.value = null;
  _this.error = null;
  _this.onFullfailedCallbacks = [];
  _this.onRejectedCallbacks = [];

  _this.resolve = function(value) {
    _this.status = FULLFILLED;
    _this.value = value;
    setTimeout(() => {
      _this.onFullfailedCallbacks.forEach(cb => {
        cb(_this.value); //可传可不传 因为每个实例有_this.value
      });
    });
  };

  _this.reject = function(error) {
    _this.status = REJECTED;
    _this.error = error;
    setTimeout(() => {
      _this.onRejectedCallbacks.forEach(cb => {
        cb(_this.error); //可传可不传 因为每个实例有_this.value
      });
    });
  };

  callback(_this.resolve, _this.reject);
}

MyPromise.prototype.then = function(onFullfilled, onRejected) {
  const _this = this;
  let promise2 = null;
  onFullfilled = typeof onFullfilled == "function" ? onFullfilled : value => value;
  onRejected = typeof onRejected == "function"? onRejected: error => { throw error;};

  if (_this.status == FULLFILLED) {
    return promise2 = new MyPromise((resolve, reject) => {
      setTimeout(() => {
        const x = onFullfilled(_this.value);
        resolve(x) 
      });
    });
  }

  if (_this.status == REJECTED) {
    return promise2 = new MyPromise((resolve, reject) => {
      setTimeout(() => {
        const x = onRejected(_this.value);
        resolve(x) 
      });
    });
  }

  if (_this.status == PENDING) {
    return promise2 = new MyPromise((resolve, reject) => {
      _this.onFullfailedCallbacks.push(() => {
        const x = onFullfilled(_this.value);
        resolve(x)
      });

      _this.onRejectedCallbacks.push(() => {
        const x = onRejected(_this.error);
        resolve(x)
      });
    });
  }
};

但它有个不足

如果then的回调函数里面不返回异步操作(promise)的话，与原生Promise是无异的

new MyPromise((resolve, reject) => {
  resolve(1);
}).then(res => {
    console.log(res);
    return 2;
  })
  .then(res2 => {
    console.log(res2);
    return 3;
  })
  .then(res3 => {
    console.log(res3);
  });
//输出:
//1
//2
//3

new Promise((resolve, reject) => {
  resolve(1);
}).then(res => {
    console.log(res);
    return 2;
  })
  .then(res2 => {
    console.log(res2);
    return 3;
  })
  .then(res3 => {
    console.log(res3);
  });
//输出:
//1
//2
//3

但是，不足来了
自己实现的Mypromise的then回调返回的是一个新的Mypromise实例，并且该实例还没有resolve的时候。后续的then回调都执行了

new Mypromise((resolve, reject) => {
  resolve(1);
}).then(res => {
    console.log(res);
     return new Mypromise((resolve, reject) => {
    //   resolve(2);
    });
}).then(res2 => {
    console.log(res2);
    return 3
}).then(res3 => {
    console.log(res3);
})
//输出:
//1
//Mypromise对象
//3

而原生的Promise返回一个新的Promise实例，并且该实例还没有resolve的时候。后续的then回调都没有执行

new Promise((resolve, reject) => {
  resolve(1);
}).then(res => {
    console.log(res);
     return new Promise((resolve, reject) => {
    //   resolve(2);
    });
}).then(res2 => {
    console.log(res2);
    return 3
}).then(res3 => {
    console.log(res3);
})
//输出:
//1

那要怎么处理这种情况呢？请看：

const PENDING = "pending";
const FULLFILLED = "fullfilled";
const REJECTED = "rejected";

function MyPromise(callback) {
  const _this = this;
  _this.status = PENDING;
  _this.value = null;
  _this.error = null;
  _this.onFullfailedCallbacks = [];
  _this.onRejectedCallbacks = [];

  _this.resolve = function(value) {
    _this.status = FULLFILLED;
    _this.value = value;
    setTimeout(() => {
      _this.onFullfailedCallbacks.forEach(cb => {
        cb(_this.value); //可传可不传 因为每个实例有_this.value
      });
    });
  };

  _this.reject = function(error) {
    _this.status = REJECTED;
    _this.error = error;
    setTimeout(() => {
      _this.onRejectedCallbacks.forEach(cb => {
        cb(_this.error); //可传可不传 因为每个实例有_this.value
      });
    });
  };

  callback(_this.resolve, _this.reject);
}

MyPromise.prototype.then = function(onFullfilled, onRejected) {
  const _this = this;
  let promise2 = null;
  onFullfilled = typeof onFullfilled == "function" ? onFullfilled : value => value;
  onRejected = typeof onRejected == "function"? onRejected: error => { throw error;};

  if (_this.status == FULLFILLED) {
    return promise2 = new MyPromise((resolve, reject) => {
      setTimeout(() => {
        const x = onFullfilled(_this.value);
        resolvePromise(promise2, x, resolve, reject);
      });
    });
  }

  if (_this.status == REJECTED) {
    return promise2 = new MyPromise((resolve, reject) => {
      setTimeout(() => {
        const x = onRejected(_this.value);
        resolvePromise(promise2, x, resolve, reject);
      });
    });
  }

  if (_this.status == PENDING) {
    return promise2 = new MyPromise((resolve, reject) => {
      _this.onFullfailedCallbacks.push(() => {
        const x = onFullfilled(_this.value);
        resolvePromise(promise2, x, resolve, reject);
      });

      _this.onRejectedCallbacks.push(() => {
        const x = onRejected(_this.error);
        resolvePromise(promise2, x, resolve, reject);
      });
    });
  }
};
//用来解析回调函数的返回值x，x可能是普通值也可能是个promise对象
function resolvePromise(bridgePromise, x, resolve, reject) {
    //如果x是一个promise
     if (x instanceof MyPromise) {
         //如果这个promise是pending状态，就在它的then方法里继续执行resolvePromise解析它的结果，直到返回值不是一个pending状态的promise为止
         if (x.status === PENDING) {
             x.then(y => {
                 resolvePromise(bridgePromise, y, resolve, reject);
             }, error => {
                 reject(error);
             });
         } else {
             x.then(resolve, reject);
         }
         //如果x是一个普通值，就让bridgePromise的状态fulfilled，并把这个值传递下去
     } else {
         resolve(x);
     }
 }

总结

众所周知jQuery链式操作的原理是每次调用完方法都返回自身实例，后面的方法也是实例的方法，所以可以继续执行。
then方法可以返回一个this实现jQuery链式操作。
但是，then方法也可以返回一个Promise，关于这一点，Promise/A+标准并没有要求返回的这个Promise是一个新的对象，但在Promise/A标准中，明确规定了then要返回一个新的对象，目前的Promise实现中then几乎都是返回一个新的Promise(详情)对象。
then返回一个新的Promise除了可以实现异步链式操作，最重要的是不同的Promise实现之间需要无缝的可交互，如ES6的Promise，和我们自己实现的Promise之间以及其他的Promise实现，必须是无缝调用的。
promise是一个通用技术方案，大家可以按照协议来各自实现
我们要把onFulfilled/onRejected的返回值x。当成是一个可能是Promise的对象，也即标准中的thenable，并以最保险的姿势调用x上的then方法，如果大家都按照标准来实现，那么不同的Promise之间就可以交互了。

new MyPromise(function(resolve, reject) {
    setTimeout(function() {
        resolve('1')
    }, 1000)
}).then(function() {
    return new Promise.reject('2') // ES6 的 Promise
}).then(function() {
    return Q.all([ // Q 的 Promise
        new MyPromise(resolve => resolve('3')) // 我们实现的Promise
        new Promise.eresolve('4') // ES6 的 Promise
        Q.resolve('5') // Q 的 Promise
    ])
})

学习来源：
JS 基础之异步（三）：Promise源码实现
38、异步、Promise/async-await/Generate