Deferred在jQuery和Angular中的使用与简单实现
Deferred是在jQuery1.5版本中加入的,并且jQuery使用它完全重写了AJax,以前也只是偶尔使用.但是上次在使用Angular做一个小应用的时候,遇到一个问题,
我将我的AJax请求放在了自己定义的factory中,并在factory编写回调函数,返回处理后的对象,然后将这个factory注入到controller中,然后我在controller中就开始对这个对象进行操作,进行一些和View上的数据绑定.
当我这样使用的时候,总是出现了问题.我在controller首次执行的时候,总是拿不到数据,而导致我的界面无法渲染,必须在一定的延迟后再次从服务中获取对象,而由于网络的不稳定性,我不知道需要设置延迟为多少.
这让我纠结很久.
我尝试使用同步aJax,但是Angular中没有提供相应的实现.
想了很久,使用了下面的代码:
factory:
ngApp.factory('UserInfoFactory', ['$http', '$q', function ($http, $q) {
var json = null;
var http = $http({method: 'GET', url: 'XXXX.ashx '});
return {
call:function(fn){
http.success(function(data){
fn(data);
})
}
}
controller
ngApp.controller('MainController', ['$scope', 'UserInfoFactory', function ($scope, UserInfoFactory) { // 引用我们定义的UserInfo服务
var func = function(data){
...
}
UserInfoFactory().call(func);
}]);
以上的代码可以办到,就在整合代码时,想到了一种更好的方式:
deferred
Angular中的deferred服务通过注入$q来实现,下面我们看一个简单的Demo,用来指出我正在干什么.
这是factory的代码
// $q 是内置服务，所以可以直接使用
ngApp.factory('UserInfoFactory', ['$http', '$q', function ($http, $q) {
return {
query : function() {
var deferred = $q.defer(); //申明deferred对象
$http({method: 'GET', url: 'XXXX.ashx '}).
success(function(data) {
deferred.resolve(data); // 声明执行成功，即http请求数据成功，可以返回数据了
}).
return deferred.promise; // 返回承诺，这里并不是最终数据，而是访问最终数据的API
}
};
}]);
其实我不是很懂为什么要用$q来命名,$defer不是更好嘛..
这是controller中的代码
ngApp.controller('MainController', ['$scope', 'UserInfoFactory', function ($scope, UserInfoFactory) { // 引用我们定义的UserInfo服务
var promise = UserInfoFactory.query(); // 同步调用，获得承诺接口
promise.then(function(data) { // 调用承诺API获取数据 .resolve
$scope.user = data;
});
}]);
我在controller里面使用Query拿到了promise对象,然后在then里面执行回调,在这里我已经可以确保我拿到正确调用的回调函数了,
这简直棒极了.
jQuery 中的deferred介绍
因为上面的原因,我打算重新把deferred理一遍,然后自己实现一个简单的deferred.
首先我们来看jQuery中的deferred对象.
使用过jQuery中的deferred的肯定了解,deferred中的三个函数
- 调用三个触发函数resolve,reject,notify，分别会触发done,fail,progres回调函数.
- 三个回调函数, 在里面编写自己的逻辑代码.
- 返回promise对象,只包含三个回调函数.
下面查看一些具体的实例,来了解如何使用deferred.
resolve/done
function cb() {
alert('success')
}
var deferred = $.Deferred()
deferred.done(cb); //在这里会看到3s后才弹出
setTimeout(function() {
deferred.resolve()
}, 3000)
reject/fail
function cb() {
alert('fail')
}
var deferred = $.Deferred()
deferred.fail(cb); // 在这里,3s后弹出fail,表示失败
setTimeout(function() {
deferred.reject()
}, 3000)
notify/progress
function cb(num) {
alert(num)
}
var deferred = $.Deferred()
deferred.progress(cb);// 会不断地弹出数字并递增
var num = 0;
setInterval(function() {
num++;
deferred.notify(num)
}, 2000)
由于notify的这个好处,用来做任务进度非常合适.
我们称 resolve,reject,notify 这3个函数为改变状态的函数,当状态改变,触发回调函数.
由于他们3个函数在deferred对象中,因此可以随意地改变状态以触发回调函数,这太不好了.
因此,deferred还提供了一个对象,promise,它只包含响应的回调函数,而不能改变状态,这常常是很多异步操作暴露出来的接口,比如,jQuery实现的aJax,在封装的过程中改变状态,而仅仅暴露了promise对象.
这也就是promise a+ 规范,是属于CommonJs范畴的,感兴趣的可以多了解.
看下面的函数调用
function getPromise(){
return $.Deferred().promise();
}
try{
getPromise().resolve("a");
} catch(err) {
console.log(err);
}
上述的调用就会抛出异常,promise对象是不能改变状态的.
在deferred和promise中,还有很多其他的函数和属性,then,when,always,state,等待,而且when和then的实现相当复杂和巧妙,但是在这里就不再概述.
下面我们开始实现deferred,
实现deferred
我通过构造函数的方式来创建deferred对象
var deferred = function () {
this._init_();
}
deferred.prototype = {
constructor: deferred,
_init_: function () {
this.resolve_list = [];
this.reject_list = [];
this.notify_list = [];
},
}
这是面向对象封装的一种比较好的方式,也是很多大牛推荐使用的.
恩 比较绕的地方就是new的执行原理,我在JavaScript面向对象高级会介绍.
好了,下面开始主要的逻辑代码
为了避免代码比较绕,我没有使用数组,而是一个一个写出来,这样代码会显得很冗余
deferred.prototype = {
constructor: deferred,
_init_: function () {
this.resolve_list = [];
this.reject_list = [];
this.notify_list = [];
},
resolve: function () {
for (var i = 0; i < this.resolve_list.length; i++) {
this.resolve_list[i].apply(this, arguments);
}
// 在jQuery中,使用了函数管理 $.callbacks('once')的方式,确保resolve只能被调用一次,
// 为了避免引入复杂的逻辑,我就直接把数组清空,这样,resolve也就只能执行一次.
this.resolve_list[i] = [];
// return this 是为了链式编程,我这里返回的还是deferred对象.
return this;
},
done: function (func) {
// 由于 func 可以是多个函数的数组,所以在这里进行一个判断,如果不是数组,那么就变成数组.
if (typeof func === 'function') {
func = [func];
}
this.resolve_list.push.apply(this.resolve_list, func);
return this;
},
reject: function () {
for (var i = 0; i < this.reject_list.length; i++) {
// arguments 参数表示 调用reject传入的参数,可以通过arguments的方式以一个数组的方式获取
// 所以下面的调用也要使用apply.
this.reject_list[i].apply(this, arguments);
}
this.reject_list = [];
return this;
},
fail: function (func) {
if (typeof func === 'function') {
func = [func];
}
this.reject_list.push.apply(this.reject_list, func);
return this;
},
notify: function () {
for (var i = 0; i < this.notify_list.length; i++) {
this.notify_list[i].apply(this, arguments);
}
return this;
},
progress: function (func) {
if (typeof func === 'function') {
func = [func];
}
this.notify_list.push.apply(this.notify_list, func);
return this;
}
}
好了,基本架子已经完成,下面我们测试一下.
var d1 = new deferred();
// 为函数列表添加事件,链式编程.
d1.done(function (arg) {
console.log(arg);
}).fail(function (arg) {
console.log(arg);
}).progress(function (arg) {
console.log(arg);
})
console.log(new Date().toLocaleTimeString() + ' first init');
setTimeout(function () {
d1.resolve(new Date().toLocaleTimeString() + ' fire resolve');
}, 2000);
setTimeout(function () {
d1.reject(new Date().toLocaleTimeString() + ' first reject');
}, 3000);
var num = 0;
setInterval(function () {
d1.notify(new Date().toLocaleTimeString() + ' first notify')
}, 1000);
下面是结果:
是的,成功了!
jQuery中的deferred相当复杂和巧妙,实际上我也还没有完全理解它的代码,写出这样代码的人真是伟大!
好了,最简单的deferred已经实现了,但是这样似乎太简单了点,下面,我要为她实现一个promise
promise
其实实现promise很简单,只需要将deferred上的done,fail和progress方法绑定到promise方法的返回值上就行了.
,需要注意的是,由于这些函数中的this值的是原来的deferred对象,但是将这些方法绑定到promise返回值的时候,this就不再是deferred对象了,所以我们需要重新制定这些函数列表
promise: function () {
var that = this;
return {
resolve_list: that.resolve_list,
reject_list: that.reject_list,
notify_list: that.notify_list,
done: that.done,
fail: that.fail,
progress: that.progress
}
}
下面测试
var d2 = new deferred();
d2.promise()
.done(function (data) {
console.log(new Date().toLocaleTimeString() + data);
})
.fail(function (data) {
console.log(new Date().toLocaleTimeString() + data);
})
.progress(function (data) {
console.log(new Date().toLocaleTimeString() + data);
});
console.log(new Date().toLocaleTimeString() + ' ' + 'first init');
setTimeout(function () {
d2.resolve(' first resolve');
}, 3000);
setTimeout(function () {
d2.reject(' first reject');
}, 2000);
setInterval(function () {
d2.notify(' first notify');
}, 1000);
测试结果
好了,这个简单版的deferred,它实在是太简化了.
在Deferred在jQuery和Angular中的使用与简单实现(二) 中 我会添加when 方法和then方法以及其他jQuery中的大部分方法. 最后会整合到JavaScript框架设计模块中,
代码 我会托管到github中.