使用$.when()解决AJAX异步难题之:多个ajax操作进行逻辑与(and)
上一篇文章"JQuery.deferred提供的promise解决方式",提到了javascript异步操作的3个问题,以及javascript Promise入门。如今我们看下怎样利用$.when()来解决上一篇博客中的第3个问题。
“考虑这样的场景。假如我们同一时候发送两个Ajax请求,然后要在两个请求都成功返回后再做一件接下来的事,想一想假设仅仅按前面的方式在各自的调用位置去附加回调,这是不是非常困难?”
使用when(),我们能够通过类似以下的代码解决问题。
以下这段代码能够实现这个效果:当ajax1和ajax2操作都成功的时候。会调用onDone回调函数。
var promise1 = $.ajax(url1),
promise2 = $.ajax(url2),
promiseCombined = $.when(promise1, promise2);
promiseCombined.done(onDone);
$.when()方法能够合并多个Promise得到一个新的Promise,相当于在原多个Promise之间建立了AND(逻辑与)的关系。假设全部组成Promise都已成功,则令合并后的Promise也成功。假设有随意一个组成Promise失败,则马上令合并后的Promise失败。
1.$.when()不传參数,或者參数既不是Deferred对象也不是Promise对象。
这样的场景没有什么实际作用。
If a single argument is passed to jQuery.when() and it is not a Deferred or a Promise, it will be treated as a resolved Deferred and any doneCallbacks attached will be executed immediately. The doneCallbacks are passed the original
argument. In this case any failCallbacks you might set are never called since the Deferred is never rejected. For example:
$.when( { testing: 123 } ).done(function( x ) {
alert( x.testing ); // Alerts "123" immediately
});
If you don't pass it any arguments at all, jQuery.when() will return a resolved promise.
$.when().done(function( x ) {
alert( "I fired immediately" );//x is undefined
});
2.$.when()仅仅有1个參数。该參数是Deferred或者Promise对象。
If a single Deferred is passed to jQuery.when(), its Promise object (a subset of the Deferred methods) is returned by the method. Additional methods of the Promise object can be called to attach callbacks, such as deferred.done.
When the Deferred is resolved or rejected, usually by the code that created the Deferred originally, the appropriate callbacks will be called. For example, the jqXHR object returned by jQuery.ajax() is a Promise-compatible object and can be used this way:
$.when( $.ajax( "test.aspx" ) ).done(function( data, textStatus, jqXHR ) {
alert( jqXHR.status ); // Alerts 200
});
// 创建1个延迟对象
var dtd = $.Deferred(); // 返回这个延迟对象的Promise
var its_promise = $.when(dtd); // 能够利用promise绑定各种回调函数
its_promise.done(function(){alert("success");}); // 改变状态仅仅能通过Deferred对象
dtd.resolve();
3.$.when()參数是多个Deferred或者Promise对象。这样的场景才是when()真正的价值所在。
In the case where multiple Deferred objects are passed to jQuery.when(), the method returns the Promise from a new "master" Deferred object that tracks the aggregate state of all the Deferreds it has been passed. The method will
resolve its master Deferred as soon as all the Deferreds resolve, or reject the master Deferred as soon as one of the Deferreds is rejected. If the master Deferred is resolved, the doneCallbacks for the master Deferred are executed. The arguments passed to
the doneCallbacks provide the resolved values for each of the Deferreds, and matches the order the Deferreds were passed to jQuery.when(). For example:
var d1 = $.Deferred();
var d2 = $.Deferred(); $.when( d1, d2 ).done(function ( v1, v2 ) {
console.log( v1 ); // "Fish"
console.log( v2 ); // "Pizza"
}); d1.resolve( "Fish" );
d2.resolve( "Pizza" );
这就是相当于2个Promise进行逻辑与操作,得到1个新的Promise。
In the event a Deferred was resolved with no value, the corresponding doneCallback argument will be undefined. If a Deferred resolved to a single value, the corresponding argument will hold that value. In the case where a Deferred
resolved to multiple values, the corresponding argument will be an array of those values. For example:
var d1 = $.Deferred();
var d2 = $.Deferred();
var d3 = $.Deferred(); $.when( d1, d2, d3 ).done(function ( v1, v2, v3 ) {
console.log( v1 ); // v1 is undefined
console.log( v2 ); // v2 is "abc"
console.log( v3 ); // v3 is an array [ 1, 2, 3, 4, 5 ]
}); d1.resolve();
d2.resolve( "abc" );
d3.resolve( 1, 2, 3, 4, 5 );
使用$.when()解决AJAX异步难题之:多个ajax操作进行逻辑与(and)的更多相关文章
- 【坑】前端使用ajax异步请求以后,springMvc拦截器跳转页面无效
文章目录 前言 `$.ajaxSetup( )` 后记 前言 本文着重解决前后端分离开发的页面调整问题. 笔者,在做一个需求,需要对访问网站,但是没有登录的用户进行拦截,将他们重定向到首页. 很简单的 ...
- 项目中使用的ajax异步读取数据结构设计
设计稍微复杂了一点,完成ajax读取功能涉及到了很多页面.虽然如此,但感觉比较灵活. 和传统方法唯一的区别在于多了一层数据容器控件,里面提供了显示数据的HTML元素及相应的JS方法. 这样数据控件指生 ...
- ajax异步服务器获取时间
1.创建ajax对象 <script type="text/javascript"> //创建AJAX异步对象 function createAJAX(){ var a ...
- ajax异步请求302分析
1.前言 遇到这样一种情况,打开网页两个窗口a,b(都是已经登录授权的),在a页面中退出登录,然后在b页面执行增删改查,这个时候因为授权原因,b页面后端的请求肯定出现异常(对这个异常的处理,进行内部跳 ...
- 关于AJAX异步加载节点无法触发点击事件问题的解决方式
做练习的过程中遇到一个问题,使用AJAX异步新增一个节点,无法触发点击事件,经过查阅之后知道一个方式,使用JS的委托事件,在此做一个记录. $(document).on('click', '.recr ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- spring HandlerInterceptorAdapter拦截ajax异步请求,报错ERR_INCOMPLETE_CHUNKED_ENCODING
话不多说,直接上正文. 异常信息: Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING 问题描述: 该异常是在页面发送ajax请 ...
- jquery Ajax异步请求之session
写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...
- 触碰jQuery:AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
随机推荐
- angularJs 中ui-router 路由向controller传递数据
页面上 : ui-sref="home.dataAnalysis({role:'thirdpart:tokenverify',menuType:'a'})" 路由设置 .state ...
- CodeForces contest/776 A+B+C题解
ICM Technex 2017 and Codeforces Round #400 (Div. 1 +Div.2,combined) A. A Serial Killer 谜一样的题意:每天从两个人 ...
- OMS数据库调整1
一.增加2T存储空间 1. 对磁盘进行分区并格式化 [root@oms-db01 ~]# fdisk -l Disk /dev/sda: 322.1 GB, 322122547200 bytes 2 ...
- 【bzoj4408】[Fjoi 2016]神秘数 主席树
题目描述 一个可重复数字集合S的神秘数定义为最小的不能被S的子集的和表示的正整数.例如S={1,1,1,4,13},1 = 12 = 1+13 = 1+1+14 = 45 = 4+16 = 4+1+1 ...
- 【bzoj2238】Mst(树链剖分+线段树)
2238: Mst Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 465 Solved: 131[Submit][Status][Discuss] ...
- 【ZOJ4053】Couleur(主席树,set,启发式)
题意: 有n个位置,每个位置上的数字是a[i],现在有强制在线的若干个单点删除操作,每次删除的位置都不同,要求每次删除之后求出最大的连续区间逆序对个数 n<=1e5,1<=a[i]< ...
- hdu 4951
Multiplication table Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Oth ...
- BestCoder Round #29 1003 (hdu 5172) GTY's gay friends [线段树 判不同 预处理 好题]
传送门 GTY's gay friends Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Ot ...
- JS基础之BOM对象
BOM 对象 JavaScript分为 ECMAScript,DOM,BOM. BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其 ...
- iOS开发-用keychain替代UDID
从2013-5-1日开始苹果就禁止对UUID的应用的通过了.所以我们需要用一些办法替换,下面我就是用keychain的访问替换掉UUID的. 那么,关于Keychain的应用,Apple提供了一个叫G ...