在写这篇文章之前,我参考了以下文章。所以我文中的例子都是精准的,而且有循可依。下面抛出例子的链接:
Understanding JQuery.Deferred and Promise
Deferred and promise in jQuery
Edit:在翻网站的时候,看到腾讯技术团队居然也刚写了一篇Promise的文章,加下链接,以作备忘。
Deferred在JQuery1.5的版本被引进,这项功能的引进使JQuery变得更加强大,良好的异步支持,让书写异步JS变得简单轻松,而且充满了乐趣。
强大的链式书写方法,显得极为优雅。当你在程序中,创建了一个Deferred方法以后,你就可以使用下面的方法来进行异步操作了:
操作方法:
deferred.resolve():将会调用Done callbacks (完成执行)回调函数。
deferred.reject():将会调Fail callbacks (失败执行)回调函数。
回调事件:
deferred.done():添加完成执行的回调函数。
deferred.fail():添加失败执行的回调函数。
deferred.always():添加完成执行,或者失败执行的回调函数。
执行方式:
deferred.when():根据条件,执行回调。
deferred.then():可以添加完成执行,失败执行或者正在执行的Deferred对象。
其他:
jQuery.Deferred():将方法加入回调队列。
.promise()
首先来看一个例子,我会在例子中加入足量的注释来让事情变得简单易懂。我们这里以陆游的一首诗为例:
<script type="text/javascript"> var UIIntrop = function () { //获取Derferred对象,以便于将方法加入到异步队列中 var deferred = $.Deferred(); setTimeout(function () { $(".con").append("陆游诗一首").append("<br/>"); //derferred执行通过 deferred.resolve(); }, 1); //返回promise对象,以便于利用then方法控制其执行 return deferred.promise(); } //获取标题 var GetTitle = function () { //由于Jquery中的$.ajax方法默认返回为promise对象,所以我们写ajax方法可以按照下面的方式来书写 var promise = $.ajax({ url: "../Home/GetTitle", type: "post" }); promise //如果ajax执行完成,执行该方法,需要注意的是,done可以被多次调用 .done(function (data) { $(".con").append(data.message).append("<br/>"); }) //第二次触发done方法 .done(function () { $(".con").append("----------------------------").append("<br/>"); }) //如果ajax执行失败 .fail(function () { $(".con").append("标题获取出错").append("<br/>"); }); return promise; } //获取第一句 var GetFirst = function () { var promise = $.ajax({ url: "../Home/GetSecond", type: "post", //这里也可以用ajax原生的方式来触发成功执行的方法 success: function (data) { $(".con").append(data.message).append("<br/>"); } }); return promise; } //获取第二句,这里的解释和上面类似 var GetSecond = function () { var deferred = $.Deferred(); $(".con").append("丰年留客足鸡豚。").append("<br/>"); deferred.resolve(); return deferred.promise(); } var GetFour = function (){ var deferred = $.Deferred(); $(".con").append("柳暗花明又一村。").append("<br/>"); deferred.resolve(); return deferred.promise(); } //第一个函数执行 UIIntrop() //第二个函数获取诗歌的标题 .then(GetTitle) //第三个函数获取诗歌第一句 .then(GetFirst) //第四个函数获取诗歌第二句 .then(GetSecond) //下面获取诗歌第三句 .then(function (value) { $(".con").append("山重水复疑无路,").append("<br/>"); }) //最后获取诗歌第四句,需要注意的是,最后一个函数主要是进行错误捕获的,前面所有的函数,只要执行出错,都会自动被最后一个函数捕获。 .then(GetFour, function (data) { $(".con").append("出现了错误."+data.responseText).append("<br/>"); }); </script> <div class="con"></div>
这样我们得到的结果就如下图所示:
这样就实现了javascript异步效果.
由于在最后一个then中,我们注册了两个函数,一个是GetFour,另外一个则是FailCallBack,也就是说,当上面的所有Promise 函数中,如果执行失败的话,都会跳入到这个函数里面来.
假设这里我们将GetTitle方法修改一下,让其找不到执行的Controller:
//获取标题 var GetTitle = function () { //由于Jquery中的$.ajax方法默认返回为promise对象,所以我们写ajax方法可以按照下面的方式来书写 var promise = $.ajax({ url: "../Home/Controller被我修改,已经无法找到", type: "post" }); promise //如果ajax执行完成,执行该方法,需要注意的是,done可以被多次调用 .done(function (data) { $(".con").append(data.message).append("<br/>"); }) //第二次触发done方法 .done(function () { $(".con").append("----------------------------").append("<br/>"); }) //如果ajax执行失败 .fail(function () { $(".con").append("标题获取出错").append("<br/>"); }); return promise; }
当我们执行的时候,错误就出来了:
这里提示已经很明显了,并且错误被最后的failCallback给捕获了。