使用JQuery Deferred对象的then() 解决多个AJAX操作顺序依赖的问题
原文地址:http://www.2cto.com/kf/201507/424202.html
之前的文章javascript异步代码的回调地狱中提到了编写AJAX代码经常遇到的3个问题,现在我们看下如何利用then()解决第2个问题:如果AJAX请求之间存在依赖关系,我们的代码就会形成Pyramid of Doom(金字塔厄运)。比如我们要完成这样一件事:有4个供Ajax访问的url地址,需要先Ajax访问第1个,在第1个访问完成后,用拿到的返回数据作为参数再访问第2个,第2个访问完成后再第3个...以此到4个全部访问完成。按照这样的写法,似乎会变成这样:
$.ajax({
url: url1,
success: function(data){
$.ajax({
url: url2,
data: data,
success: function(data){
$.ajax({
//...
});
}
});
}
});
1.Deferred.then()相当于Deferred.done()、Deferred.fail()、Deferred.progress()的合体,可以同时注册3个状态下的回调函数。
function success(data)
{
alert(success data = + data);
} function fail(data)
{
alert(fail data = + data);
} function progress(data)
{
alert(progress data = + data);
} var deferred = $.Deferred(); // 一起注册回调
deferred.then(success, fail, progress); // 分别注册回调
deferred.done(success);
deferred.fail(fail);
deferred.progress(progress); deferred.notify(%);
deferred.resolve(ok);
当然我们也可以像done()一样,多次调用then()注册回调函数。then()虽然可以这么使用,但是实际开发中一般不这么用,因为没有啥必要。JQuery1.8之前,这就是then()方法的作用。
2.Deferred.then()解决多个异步操作之间有依赖的问题,这才是then()真正有意义的场景。JQuery1.8之后,then()取代了过时的pipe()方法。这种场景下,我们需要使用Deferred.then()返回的新Promise对象。上面的第一种使用方式,我们忽略了Deferred.then()的返回值。
var deferred = $.Deferred(); // 使用then()注册一个resolved状态的回调函数,并返回一个过滤后的promise
// 返回的filtered已经不是原来的Deferred或者Promise对象了
var filtered = deferred.then(function( value ) {
alert(trigger Deferred filter.value=+value);//
return value * ;
}); // 用过滤后的Promise再次注册回调函数
filtered.done(function( value ) {
alert(filtered value= + value);//
}); deferred.resolve( );
我们用deferred.then()注册了一个完成状态下的回调函数,这个回调函数得到的值是5;之后用filtered这个新的Promise注册回调函数,这个回调函数中得到的值是10(第一个回调函数的返回结果)。现在我们看下JQuery官方对then的解释:
These filter functions can return a new value to be passed along to the promise's .done() or .fail() callbacks, or they can return another observable object (Deferred, Promise, etc) which will pass its resolved / rejected status and values to the promise's callbacks. If the filter function used is null, or not specified, the promise will be resolved or rejected with the same values as the original.
我们知道deferred.resolve()、deferred.reject()、deferred.notify()可以指定参数值,这个参数会传递给相应状态下的回调函数。如果我们使用的是done()、fail()、progress()注册的回调函数,那么某个状态下的所有回调函数得到的都是相同参数。但是如果我们使用了then()注册回调函数,那么第一回调函数的返回值将作为第二个回调函数的参数,同样的第二个函数的返回值是第三个回调函数的参数。可以对比下面的2段代码,体会下done()和then的差别。
var deferred = $.Deferred(); // done()返回的仍然是原来的Deferred对象
var done_ret = deferred.done(function(data){
alert(data=+data);//
return * data;
});
alert(deferred == done_ret);//true done_ret.done(function(data){
alert(data=+data);//
}); deferred.resolve( );
var deferred = $.Deferred(); // then()返回的是一个新Promise对象
//then注册的回调函数的返回值将作为这个新Promise的参数
var then_ret = deferred.then(function(data){
alert(data=+data);//
return * data;
});
alert(then_ret == deferred);//false then_ret.done(function(data){
alert(data=+data);//
}); deferred.resolve( );
同样地,Deferred.then也能够实现rejected和pending状态的回调函数过滤
var defer = $.Deferred();
var filtered = defer.then( null, function( value ) {
return value * ;
}); defer.reject( ); filtered.fail(function( value ) {
alert( Value is ( * = ) : + value );
});
下面这段代码可以实现chain tasks,解决异步操作中回调难的问题。
var defered = $.Deferred(); var promise1 = defered.then(function(data){
alert(data);//
return data+=;
}); var promise2 = promise1.then(function(data){
alert(data);//
return data+=;
}); var promise3 = promise2.then(function(data){
alert(data);//
return data+=;
}); promise3.done(function(data){
alert(data);//
}); defered.resolve();
正是由于then()这个特性,我们就可以上面复杂的AJAX嵌套改成如下形式:
var promise1 = $.ajax(url1);
var promise2 = promise1.then(function(data){
return $.ajax(url2, { data: data });
});
var promise3 = promise2.then(function(data){
return $.ajax(url3, { data: data });
});
promise3.done(function(data){
// data retrieved from url3
});
使用JQuery Deferred对象的then() 解决多个AJAX操作顺序依赖的问题的更多相关文章
- javascript --- jQuery --- Deferred对象
javascript --- jQuery --- Deferred对象 javascript的函数式编程是多么引人入胜,jQuery使代码尽可能的精简,intelligent! defer - 必应 ...
- jQuery.Deferred对象
一.前言 jQuery1.5之前,如果需要多次Ajax操作,我们一般会使用下面的两种方式: 1).串行调用Ajax $.ajax({ success: function() { $.ajax({ su ...
- JQuery Deferred 对象
http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html <jQu ...
- javascript异步代码的回调地狱以及JQuery.deferred提供的promise解决方式
我们先来看一下编写AJAX编码常常遇到的几个问题: 1.因为AJAX是异步的,全部依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套.ajax等异步操作越多,嵌套层次就会越 ...
- jQuery Deferred对象详细源码分析(-)
本系列文章讲介绍这个Deferred东西到底拿来干什么,从1.5版本加进来,jQuery的很多代码都重写了.直接先上源码分析了,清楚了源码分析,下节将讲具体的应用 以及应用场景. 创建对象 var d ...
- JQuery Deferred 对象剖析
JQuery 中利用 Deferred 对象提供类似 ES2016(aka. es7) 中 Promise 的功能. JQuery 中的 AJAX 请求函数返回的就是 Deferred 对象. 通过使 ...
- JQuery Deferred对象使用小结
场景描述 如下,打开页面时,获取默认选中的项目,同时也会初始化Combobox下拉框下拉列表数据 问题描述 获取默认选中项目及下拉列表的js函数位于common.js文件,类似如下: // 根据项目类 ...
- 使用 jQuery Deferred 和 Promise 创建响应式应用程序
这篇文章,我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念,它们是 JavaScript 工具包(如Dojo和MochiKit)中非常重要的一个功能,最近也首 ...
- jQuery Deferred和Promise的使用介绍:
deferred对象是从jquery1.5.0引入的一个新对象,ES6也引入了Promise的正式规范. 抽象来说,deferreds 可以理解为表示需要长时间才能完成的耗时操作的一种方式,相比于阻塞 ...
随机推荐
- hive union all使用注意
UNION用于联合多个select语句的结果集,合并为一个独立的结果集,结果集去重. UNION ALL也是用于联合多个select语句的结果集.但是不能消除重复行.现在hive只支持UNION AL ...
- ::before ::after CSS3中的伪类和伪元素
::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...
- CSS Float(浮动)
CSS Float(浮动) 一.CSS Float(浮动) CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常 ...
- mysql对数据库的备份和还原
在对mysql数据库的某个数据库进行备份时,使用 mysqldump命令来进行操作 mysqldump -u root -p db_database_name > /[your_path.mys ...
- [代码解析]Mask R-CNN介绍与实现(转)
文章来源 DFann 版权声明:如果你觉得写的还可以,可以考虑打赏一下.转载请联系. https://blog.csdn.net/u011974639/article/details/78483779 ...
- 配置spring boot 内置tomcat的accessLog日志
#配置内置tomcat的访问日志server.tomcat.accesslog.buffered=trueserver.tomcat.accesslog.directory=/home/hygw/lo ...
- 如何制作自己的R包?
摘自 方匡南 等编著<R数据分析-方法与案例详解>.电子工业出版社 R包简介 R包提供了一个加载所需代码.数据和文件的集合.R软件自身就包含大约30种不同功能的包,这些基本包提供了R软件的 ...
- jQuery全局冲突案例,解决$.noConflict()
如图:犹豫$在js中可以作为一个变量去定义,所以在引入jQuery包之前定义了$对象,那么,在引入jQuery包之后就不能使用$对象了 解决:使用$.noConflict()她可以返回一个对象,这个对 ...
- Mac下配置NDK环境
下载NDK 这里写图片描述配置NDK开发环境 第一步:打开Mac终端 Snip20170208_1.png 第二步:在终端中输入:open -e .bash_profile,打开.bash_profi ...
- python脚本10_打印斐波那契数列的第101项
#打印斐波那契数列的第101项 a = 1 b = 1 for count in range(99): a,b = b,a+b else: print(b) 方法2: #打印斐波那契数列的第101项 ...