实现一个Promise

本文讲解了如何用JavaScript实现一个Promise，实现过程用到了以下的知识点

1. 闭包
2. 事件循环
3. typeof的用法

学习实现Promise之前，先看一个简单的Promise的使用案例

var promise=new Promise(function(resolve,rejcet){
    setTimeout(function(){
        resolve(42);
        console.log('Promise done!');
    }，1000)；
})；
promise.then(function(value){
    console.log('I get the result ',value);
});

输出的结果是

Promise done!
I get the result 42

这段代码目的是执行一个异步操作（setTimeout），把异步操作中得到的结果传递给下一个函数。
由于事件循环的原因，then方法比resolve方法先执行，提前把一个回调函数添加到了Promise中，等到resolve方法执行时，回调函数被调用。似乎resolve执行过程并不是同步的，因为它后面的一行代码运行完才执行那个提前添加的回调函数。
根据观察可以猜测Promise内部大概是这样：

function Promise(executor) {
  var deferreds = [];
  this.then = function (onFulfilled) {
    deferreds.push(onFulfilled);
  };

  function resolve(value) {
    setTimeout(function(){
      deferreds.forEach(function (deferred) {
        deferred(value);
      });
    },0);
  }
  executor(resolve);
}

串联Promise

Promise串联是我们常用的功能，这也是Promise最具魅力的地方。通过让then方法返回Promise对象就可以实现。

this.then = function (onFulfilled) {
  return new Promise(function (resolve,rejcet) {
    deferreds.push({
      onFulfilled: onFulfilled || null,
      resolve: resolve
    });
  });
};

function resolve(result) {
  setTimeout(function () {
    deferreds.forEach(function (deferred) {
      value = deferred.onFulfilled(result);
      deferred.resolve(value);
    });
  }, 0);
}

这里的关键是实例化Promise时把一个新的resolve函数传递给前一个Promise的回调队列中，可以看出串联的本质是resolve嵌套执行。这里用到了闭包。
到这里为止，我们构建的这个Promise已经基本可以使用了。
接着最开始的例子测试一下

promise.then(function(value){
  console.log('I get the result ',value);
  return value;
}).then(function(value){
  console.log('I get the result ',value);
});

设想我们用Promise封装一个http请求，请求到数据不是想要的，要处理这种情况必须在后续的回调函数里进行条件判断，这非常麻烦。所以Promise A+标准规定必须给Promise设置状态，并且then方法里要注册两个回调函数，根据Promise的状态来执行相应的回调函数。

Promise的状态

Promise A+标准规定一个Promise必须处在pending,fulfilled,fulfilled这三种状态中的一个，看字面意思就可以理解，pending是未完成的状态，fulfilled是完成的状态，fulfilled是失败的状态。pending可以向其他两种状态转换，但这种转换时不可逆的，而且一个Promise的状态只能转换一次，也就是说不可以在另两种状态之间互相转换。
引入状态和失败状态的处理函数，重构一下代码

var PENDING = 0;
var FULFILLED = 1;
var REJECTED = 2;

var state = PENDING,//初始状态设为pending
    value = null,//存储onFulfilled和onRejected执行的结果
    deferreds=[];

function resolve(result) {
  if (state !== PENDING) {return;}
    setTimeout(function() {
      value = result;
      state = FULFILLED;
      done();
  }, 0);
}

function reject(reason) {
  if (state !== PENDING) {return;}
    setTimeout(function() {
      value = reason;
      state = REJECTED;
      done();
    }, 0);
}

function done() {
  setTimeout(function() {
    deferreds.forEach(function(deferred) {
      handle(deferred);
    });
  }, 0);
}

所有状态的判断和回调函数的执行交给handle方法来做。

function handle(deferred) {
  if (state === PENDING) {
    deferreds.push(deferred);
  } 
  else {
    if (state === FULFILLED) {
      var result = typeof deferred.onFulfilled === 'function' ? deferred.onFulfilled(value) : value;
      deferred.resolve(result);
    } else if (state === REJECTED) {
      var reason = typeof deferred.onRejected === 'function' ? deferred.onRejected(value) : value;
      deferred.reject(reason);
    }
  }
}

小结

本文从已知的Promise的用法入手，运用熟悉的知识逐步深入去实现一个Promise，经过一番摸索，Promise不再神秘，它的内部原理已经被揭晓。一些常见的Promise用法在本文中没有被实现，比如对thenable对象的支持，还有ES6 Promise中的catch，all，race等方法，大家可以自己思考并实现。
本文中的源代码在这里。