when.js的原理及快速实现

发表于 5年以前 | 总阅读数：1359 次

这篇文章可以看作是屈屈同学关于when.js的文章《异步编程：When.js快速上手》的续篇。

屈屈的文章中详细介绍了when.js，在这里关于when.js的使用我就不多复述了，大家可以自己去研究它的API。

在这里，我主要想讨论的是如何实现一个when.js类似的promise/A框架。为了更清晰了解实现原理，我略过when.js中一些比较强大的功能，只实现其中最核心的功能，包括基本的then()，otherwise()以及比较好用的all()和any()。

下面看一下Promise的基本数据结构：

function Promise(){
      this._resolves = [];
      this._rejects = [];
      this._readyState = Promise.PENDING;
      this._data = null;
      this._reason = null;
    }

    mix(Promise, {
      PENDING : 0,
      FULFILLED : 1,
      REJECTED : 2,
      isPromise: function(obj){
        return obj != null && typeof obj["then"] == "function";
      }
    });

我们可以看到，一个Promise包含五个属性，一个_resolves数组用来存放当状态转换为FULFILLED之时需要执行的动作，_rejects数组用来存放当状态转换为REJECTED时需要执行的动作，一个_readyState属性用来存放当前的Promise对象的状态，一个_data属性用来存放调用resolve时传递参数，一个_reason属性用来存放调用reject时传递的参数。

详细的参数说明我们继续看后面的实现会比较明白：

mix(Promise.prototype, {
      then: function(onFulfilled, onRejected){
        var deferred = new Defer();
        function fulfill(data){
          var ret = onFulfilled ? onFulfilled(data) : data;
          if(Promise.isPromise(ret)){
            ret.then(function(data){
              deferred.resolve(data);
            });
          }else{
            deferred.resolve(ret);
          }
          return ret;
        }

        if(this._readyState === Promise.PENDING){
          this._resolves.push(fulfill);

          if(onRejected){
            this._rejects.push(onRejected);
          }else{
            //为了让reject向后传递
            this._rejects.push(function(reason){
              deferred.reject(reason);
            });
          }
        }else if(this._readyState === Promise.FULFILLED){
          var self = this;
          setTimeout(function(){
            fulfill(self._data);
          });
        }
        return deferred.promise;
      },
      otherwise: function(onRejected){
        return this.then(undefined, onRejected);
      }
    });

Promise.prototype.then 是整个组件里面最复杂的地方，代码直接阅读可能看起来会比较不明白，我后面会详细讲，在这里先暂时把这个方法做一个简化，便于大家理解其中最核心的内容：

mix(Promise.prototype, {
      then: function(onFulfilled, onRejected){
        if(this._readyState === Promise.PENDING){
          if(onFulfilled){
            this._resolves.push(onFulfilled);
          }

          if(onRejected){
            this._rejects.push(onRejected);
          }
        }else if(this._readyState === Promise.FULFILLED){
          return onFulfilled && onFulfilled(this._data);
        }
      },
      otherwise: function(onRejected){
        return this.onFulfilled(undefined, onRejected);
      }
    });

简化成这样，看起来就简单明了了吧，实际上就是当Promise状态为PENDING的时候，如果有执行then，需要将onFulfilled和onReject暂存起来，等到真正的异步操作执行完成后再触发。那么为什么这样简单的写法不行，需要上面那种复杂写法呢？我们慢慢来往下看---- resolve和reject两个方法就很简单了，实际上就是看是否有暂存起来的操作需要执行，如果有的话，就把这些操作执行了。

function Defer(){
      this.promise = new Promise();
    }

    mix(Defer.prototype,{
      resolve: function(data){
        var promise = this.promise;
        if(promise._readyState != Promise.PENDING){
          return;
        }

        promise._readyState = Promise.FULFILLED;
        promise._data = data;

        ArrayH.forEach(promise._resolves, function(handler){
          handler(data);
        });
      },
      reject: function(reason){
        var promise = this.promise;
        if(promise._readyState != Promise.PENDING){
          return;
        }
        promise._readyState = Promise.REJECTED;
        promise._reason = reason;

        var handler = promise._rejects[0];
        if(handler){
          handler(reason);
        }
      }
    });

这里我用了和when.js一样的思路，将resolve和reject定义在一个新的Defer对象上，这样是为了将这两个方法封装在使用promise的方法内部，避免使用者让promise在外部操作状态改变，从而增加程序复杂度。有了这个Defer之后，我们就可以很方便地将一个方法写成Promise了----

function Test(){
      var deferred = new Defer();

      QW.getJSONP(api, function(data){
        deferred.resolve(data[0]);
      });

      return deferred.promise;
    }

写法上是不是跟when.js一样？

但是简化版的Promise有个很重要的问题没有解决----then的链式调用。因为如果没有链式调用，就没法解决异步嵌套的问题，那样promise也就失去了存在的意义。

现在我们再回过头来看看为什么要写复杂的then----

mix(Promise.prototype, {
      then: function(onFulfilled, onRejected){
        var deferred = new Defer();
        function fulfill(data){
          var ret = onFulfilled ? onFulfilled(data) : data;
          if(Promise.isPromise(ret)){
            ret.then(function(data){
              deferred.resolve(data);
            });
          }else{
            deferred.resolve(ret);
          }
          return ret;
        }

        if(this._readyState === Promise.PENDING){
          this._resolves.push(fulfill);

          if(onRejected){
            this._rejects.push(onRejected);
          }else{
            //为了让reject向后传递
            this._rejects.push(function(reason){
              deferred.reject(reason);
            });
          }
        }else if(this._readyState === Promise.FULFILLED){
          var self = this;
          setTimeout(function(){
            fulfill(self._data);
          });
        }
        return deferred.promise;
      },
      otherwise: function(onRejected){
        return this.then(undefined, onRejected);
      }
    });

我们看一下类似于下面这种调用情况----

var getData = function() {
      var deferred = when.defer();

      $.getJSON(api, function(data){
        deferred.resolve(data[0]);
      });

      return deferred.promise;
    }

    var getImg = function(src) {
      var deferred = when.defer();

      var img = new Image();

      img.onload = function() {
        deferred.resolve(img);
      };

      img.src = src;

      return deferred.promise;
    }

    var showImg = function(img) {
      $(img).appendTo($("#container"));
    }

    getData()
    .then(getImg)
    .then(showImg);

这段代码在屈屈童鞋的那篇文章中出现，它最重要的是 getData().then(getImg).then(showImg) 这种链式形式，表示先通过jsonp获得image数据，然后再通过数据展现出图片，这种化异步嵌套为可读性更好的链式调用形式正是promise规范存在的意义所在，那么如何实现这一点呢？

仔细观察可以发现，如果把前面两级看作一个整体，(getData().then(getImg)).then(showImg)显然是一个单一的promise，这个promise我们可以通过一个范式来表达一下----

A().then(B).then(C) => A().then(B) ==
    (function(){
      var deferred = new Defer();
      A().then(function(){
        var ret = B.apply(this, arguments);
        if(isPromise(ret)){
          ret.then(function(data){
            deferred.resolve(data);
          });
        }else{
          deferred.resolve(ret);
        }
        return ret;
      });
      return deferred.promise;
    })();

上面这个代码是什么意思呢？其实就是说，要实现A().then(B).then(C)，其实等价于需要 A().then(B)返回一个新的Promise，而这个新的Promise是相当于当then(B)中的B被调用的时候，执行resolve操作，所以用以下方法传给A的resolve队列替代原先的"B"方法即可----

function(){
      var ret = B.apply(this, arguments);
      if(isPromise(ret)){
        ret.then(function(data){
          deferred.resolve(data);
        });
      }else{
        deferred.resolve(ret);
      }
      return ret;
    }

想通了上面这一点，就好理解那个复杂的then了，正是做了这件事情，用下面的方法----

function(){
      var ret = onFulfilled.apply(this, arguments);
      if(isPromise(ret)){
        ret.then(function(data){
          deferred.resolve(data);
        });
      }else{
        deferred.resolve(ret);
      }
      return ret;
    }

替代了直接push进onFulfilled到_resolves。

讲到这里，我想强调一下，promise规范的神奇之处就在这里了----我们恰恰是用了promise规范本身实现了这个规范实现的最难之处----then的链式调用~

写通了这个核心部分，那么剩下的功能就不复杂了，我们既然可以用promise规范来实现promise本身的核心代码，当然也可以用它来实现all和any等功能了，那些相对来说都会是非常简单的问题----

QW.P = {
      defer: function(){
        return new Defer();
      },
      all: function(promises){
        var deferred = QW.P.defer();

        var n = 0, result = [];
        ArrayH.forEach(promises, function(promise){
          promise.then(function(ret){
            result.push(ret);
            n++;

            if(n >= promises.length){
              deferred.resolve(result);
            }
          });
        });

        return deferred.promise;
      },
      any: function(promises){
        var deferred = QW.P.defer();

        ArrayH.forEach(promises, function(promise){
          promise.then(function(ret){
            deferred.resolve(ret);
          });
        });

        return deferred.promise;
      }
    };

    QW.defer = QW.P.defer;

从上面的代码可以看到，all和any都可以通过promise本身轻松实现，其逻辑并不复杂。顺便我们实现了QW.P.defer()这个语法糖。上面的代码的例子是基于QWrap的，但是我们会发现将它独立出来并不复杂，因为它只是依赖于ArrayH.forEach和ObjectH.mix，直接从QW中copy过来这两个方法就好了。

最后我们看一下完整的代码----

(function(){

      var mix = QW.ObjectH.mix,
      ArrayH = QW.ArrayH;

      function Promise(){
        this._resolves = [];
        this._rejects = [];
        this._readyState = Promise.PENDING;
        this._data = null;
        this._reason = null;
      }

      mix(Promise.prototype, {
        then: function(onFulfilled, onRejected){
          var deferred = new Defer();
          function fulfill(data){
            var ret = onFulfilled ? onFulfilled(data) : data;
            if(Promise.isPromise(ret)){
              ret.then(function(data){
                deferred.resolve(data);
              });
            }else{
              deferred.resolve(ret);
            }
            return ret;
          }

          if(this._readyState === Promise.PENDING){
            this._resolves.push(fulfill);

            if(onRejected){
              this._rejects.push(onRejected);
            }else{
              //为了让reject向后传递
              this._rejects.push(function(reason){
                deferred.reject(reason);
              });
            }
          }else if(this._readyState === Promise.FULFILLED){
            var self = this;
            setTimeout(function(){
              fulfill(self._data);
            });
          }
          return deferred.promise;
        },
        otherwise: function(onRejected){
          return this.then(undefined, onRejected);
        }
      });

      mix(Promise, {
        PENDING : 0,
        FULFILLED : 1,
        REJECTED : 2,
        isPromise: function(obj){
          return obj != null && typeof obj["then"] == "function";
        }
      });

      function Defer(){
        this.promise = new Promise();
      }

      mix(Defer.prototype,{
        resolve: function(data){
          var promise = this.promise;
          if(promise._readyState != Promise.PENDING){
            return;
          }

          promise._readyState = Promise.FULFILLED;
          promise._data = data;

          ArrayH.forEach(promise._resolves, function(handler){
            handler(data);
          });
        },
        reject: function(reason){
          var promise = this.promise;
          if(promise._readyState != Promise.PENDING){
            return;
          }
          promise._readyState = Promise.REJECTED;
          promise._reason = reason;

          var handler = promise._rejects[0];
          if(handler){
            handler(reason);
          }
        }
      });

      QW.P = {
        defer: function(){
          return new Defer();
        },
        isPromise: function(promiseOrValue){
          return Promise.isPromise(promiseOrValue);
        },
        all: function(promises){
          var deferred = QW.P.defer();

          var n = 0, result = [];
          ArrayH.forEach(promises, function(promise){
            promise.then(function(ret){
              result.push(ret);
              n++;

              if(n >= promises.length){
                deferred.resolve(result);
              }
            });
          });

          return deferred.promise;
        },
        any: function(){
          var deferred = QW.P.defer();

          ArrayH.forEach(promises, function(promise){
            promise.then(function(ret){
              deferred.resolve(ret);
            });
          });

          return deferred.promise;
        }
      };

      QW.defer = QW.P.defer;

    })();