javascript 学习笔记之JQuery中的Deferred对象

时间:2023-03-09 05:18:08
javascript 学习笔记之JQuery中的Deferred对象

  Deffered是Jquery中的一个非常重要的对象,从1.5版本之后,Jquery中的ajax操作都基于Deffered进行了重构,这个对象的处理模式就像其他Javascript框中的Promise异步模式一样,它代表一个潜在的、长时间运行但不必返回完成操作的结果,与等待并阻塞浏览器进程直到完成操作相比,Deffered返回的是一个承诺异步执行结果的对象,这个承诺可以有返回值,也可以没有,浏览器被释放出来做其他事情,直到这个返回结果被使用到。Deffered的原理是给异步请求过程中状态的变化注册回调函数,实现链式调用,如对象的then函数;统一对这些回调函数的结果进行管理控制,以面对多个请求的需要,如Jquery中的when函数。

下面用一个简单的例子看看Deffered对象是如何工作的:

 function BeginRequest() {
//定义deferred对象
var def = $.Deferred();
//创建XMLHttpRequest对象
var request = new XMLHttpRequest();
//配置一个异步请求
request.open("GET", "../textPage/httpScript.ashx");
//定义请求状态变化的处理过程
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
def.resolve(request.responseText);
}
else if (request.status === 404) {
def.reject();
}
}
//设置请求头
request.setRequestHeader("content-type", "text/plain");
//开启一个请求
request.send(null);
//返回deferred对象
return def;
}

我们先通过JQuery中的Deferred()函数创建一个deferred对象,然后在异步请求中根据请求的状态分别注册对象的resolve和reject函数,最后返回这个deferred对象,接下来可以进行链式调用:

 BeginRequest().then(function(s) {
console.log("success.");
}, function() {
console.log("failed.");
});

上面调用了deferred对象的then函数,这个函数有两个函数参数,第一个是异步结果成功的时候执行,第二个是失败的时候执行。

  这里需要介绍一下deferred对象的三种执行状态:未完成、已完成、已失败。如果是已完成(resolve),deferred对象会立即触发done()函数指定的回调函数;如果是已失败(reject),deferred对象会立即触发fail()函数指定的回调函数;如果是未完成,即等待过程中,则继续等待或者deferred对象触发process()(jquery1.7版本及以上)函数指定的回调函数。上面的then函数传递了两个回调函数分别对完成和失败两种状态进行处理,而且deferred对象的状态可以通过调用对象中resolve()和reject()函数改变,调用分别触发done()和fail()指定的回调函数,故上述调用部分可以改写为:

 BeginRequest().done(function(s) {
console.log("success.");
}).fail(function() {
console.log("failed.");
});

可以看出,deferred对象的引入给程序的异步执行带来了极大的便利,更加简洁,可读性更高。这在JQuery Ajax请求中得到了及普遍的应用,在1.5版本以前,Ajax请求返回的是XHR对象,其成功及差错处理方式如下:

 $.ajax({
//要请求的url
url: "../textPage/httpScript.ashx",
//请求成功后调用的回调函数
success: function(result) {
console.log("success.");
},
//请求失败后调用的回调函数
error: function(e) {
console.log("failed.");
}
});

传统的ajax请求接收一个无类型对象为参数,对象中指定了请求的url及回调函数,当回调过程中嵌套ajax请求的话,这个过程看起来很不清晰。在1.5及以后的版本中,ajax返回的对象不再是XHR类型,而是deferred对象,且会自动触发其状态的改变,故新的ajax请求可以改写为:

 $.ajax("../textPage/httpScript.ashxs").then(function() {
console.log("success.");
}, function() {
console.log("failed.");
});

这里使用了then方法,当然,也可以调用fail和done函数实现。

上面对JQuery中deferred对象的使用有了初步的了解,接下来进行进一步学习:

deferred对象的作用范围

正是因为deferred的状态可以通过其对象调用resolve和reject函数来动态改变,所以在程序流程中我们不希望其状态被意外的改变而造成错误,下面代码是很好的证明:

 function BeginRequest() {
//定义deferred对象
var def = $.Deferred();
//创建XMLHttpRequest对象
var request = new XMLHttpRequest();
//配置一个异步请求
request.open("GET", "../textPage/httpScript.ashx");
//定义请求状态变化的处理过程
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
//正常处理过程被延时5秒钟
setTimeout(function() {
def.resolve("the request is complete.");
}, 5000);
}
else if (request.status === 404) {
def.reject();
}
}
//设置请求头
request.setRequestHeader("content-type", "text/plain");
//开启一个请求
request.send(null);
//返回deferred对象
return def;
} //保存异步操作结果的deferred对象,以作他用
var tempDef = BeginRequest().done(
function(msg) {
if (arguments.length <= 0) {
//如果是意外改变
console.log("valid call.");
}
else {
//成功后改变
console.log(msg);
}
}).fail(
function() {
console.log("failed.");
});
//意外改变deferred的状态为已完成
tempDef.resolve();

  代码中将请求成功后的执行过程人为的延迟了5秒,以模仿耗时操作,在调用的时候保存了deferred对象以备他用,但是程序意外的通过这个被保存的对象更改了其状态,执行上面的代码,输出”valid call“而不是”the request is complete .“。

可见,deferred对象的直接传递存在一定的安全和不确定的风险,为了避免这种情况,有三种方式可以解决:

1. 尽量在同一个函数或者模块中使用deferred对象及其相关操作。

2. 在使用deferred对象时尽量使用链式调用,不要暴露传递中的deferred对象给其他模块。

3. 为此,JQuery专门为deferred定义了一个promise方法,该方法也返回一个deferred对象,但这个对象不再包含引起状态改变的函数,如:resolve、reject、resolveWith等,这种方式最优。

对于JQuery中的Promise函数,我的理解是为了保持异步执行状态,防止不确定状态改变而定义的。借上例,我们将BeginRequest()函数的最后一行改写为:

1 //返回deferred的安全对象
2 return def.promise();

如此,再次执行上面的过程,程序果断抛出异常:

javascript 学习笔记之JQuery中的Deferred对象

5秒后输出正常路径下的结果,可见,deferred对象的状态没有被改变。这里有一篇很好的文章,可以参考一下。

同一个异步操作指定多个回调函数

也就是说,在异步操作返回的deferred对象上可以绑定多个回调函数(done、fail、then均可),幸运的是:done、fail、then函数返回的都是对同一个deferred对象的引用,故可以对同一个deferred对象执行多个done(或者fail或者then)处理过程,这些处理过程一次顺序执行,以done为例,代码如下:

 $.ajax("../textPage/httpScript.ashxs")
.done(function() {
console.log("success.");
})
.done(function() {
console.log("第二次处理.");
})
.done(function() {
console.log("第三次处理");
});
//……

大部分实际需求均不会如此使用,但对于流程性比较强的处理过程,可以如此来分步执行,使实现过程更加简洁,特别是在动画处理的过程中。

  大多数时候,我们只需要在done的回调函数中执行响应处理操作即可,但是偶尔需要针对不同的情况作出不同的处理,如何做呢?嗯,其实done等异步处理函数中指定的回调函数是可以添加参数的,单个异步请求中,回调函数有三个参数

,第一个参数是异步结果,第二个对象是请求状态,第三个是结果的deferred对象,代码如下:

 $.ajax("../textPage/httpScript.ashx")
//成功时执行此回调函数
.done(
function(result, status, def) {
console.log(result.toString());
console.log(status.toString());
console.log(typeof def);
}
)
//失败时执行此回调函数
.fail(
function(result, status, def) {
console.log("failed.");
}
);

输出如下:

javascript 学习笔记之JQuery中的Deferred对象

为多个异步操作指定统一的回调处理

  在实际需求中,我们会遇到很多异步操作,如果业务逻辑要求在某些异步操作均完成后再进行其他操作,那么我们需要对这些异步操作进行等待,直到所有都完成,即为多个异步操作定义统一的回调函数来对成功和失败进行管理,传统的异步方法是做不到的。在JQuery中,when函数可以很好的很方便的解决这一问题,来看下面的代码:

 $.when($.ajax("../textPage/httpScript.ashx"), $.ajax("../textPage/Pictrue.aspx"))
//成功时执行此回调函数
.done(
function() {
console.log("success.")
}
)
//失败时执行此回调函数
.fail(
function() {
console.log("failed.");
}
);

  $.when()函数返回的是deferred对象,故上面对该返回值用函数done()、fail()分别处理成功及失败的情况(then函数也可以实现),和其他不同的是when函数中我们执行了两个异步请求,它的执行过程须等待所有起步请求执行完毕,才能进行done或者fail的处理流程,并且,只有当when函数中的所有异步操作均成功才能触发done函数中指定的回调函数,其中一个或者多个失败则会触发fail函数中指定的回调函数。

有趣的是,我们可以在done或者fail中进行详细跟踪每个请求的结果,这需要对done和fail中定义的回调函数添加参数,改写如下:

 $.when($.ajax("../textPage/httpScript.ashx"), $.ajax("../textPage/Pictrue.aspx"))
//成功时执行此回调函数
.done(
function(r1, r2) {
console.log("success.")
}
)
//失败时执行此回调函数
.fail(
function(r1, r2) {
console.log("failed.");
}
);

经过测试,发现上述阴影部分所标记的参数分别代表when中每个请求的结果对象,对这些参数进行监控调试,其内容如下:

javascript 学习笔记之JQuery中的Deferred对象

  由上图可以看出,r1和r2均是长度为3的数组,以r1为例,数组的第一个元素是异步操作的结果,第二个元素是异步操作状态,第三个元素是当前异步操作返回的deferred结果对象。经验证,r1和r2分别是then中两个请求的结果对象,如此我们在为多个异步操作统一回调函数的同时,也可以根据不同操作的返回结果给用户以不同的反馈,这可以通过给回调函数添加参数获得。

不局限于异步ajax请求

JQuery中的deferred对象不仅应用于ajax异步请求,对于一些复杂耗时的脚本操作也是可以的,它提供了对异步操作结果的一个将来结果,用以对异步操作的一个管理,查看下面的 代码:

 var handle = function() {
//创建deferred对象
var def = $.Deferred();
//内部函数
function test() {
alert("over.");
//改变执行状态
def.resolve();
}
//模仿某个复杂耗时的操作,模拟需要5秒,然后再执行函数test
setTimeout("test()", 5000);
//返回deferred对象;
return def.promise();
} $.when(handle)
.done(
function() {
console.log("success.");
}
)
.fail(
function() {
console.log("failed.");
}
);

总结:JQuery中的deferred对象为了js脚本的异步过程提供了一种结果处理方式,它不改变原有的异步过程,以更加简洁、更加易读的方式管理并执行异步操作,从原理上来说,只是更加完善的完成异步操作而已。