When.js的原理及快速实现-阿里云开发者社区

开发者社区> 亦才> 正文

When.js的原理及快速实现

简介:
+关注继续查看

这篇文章可以看作是屈屈同学关于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;

})();

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6835 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
2782 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4397 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7734 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5409 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9406 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
2121 0
+关注
77
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载