jQuery通过deferred对象管理ajax异步


Posted in Javascript onMay 20, 2016

今天跟大家分享一个jquery中的对象-deferred。其实从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。不过可能在实际开发过程中用到的并不多,所以没有太在意。

什么是deferred对象?

开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。

通常的做法是,为它们指定回调函数(callback)。即事先规定,一旦它们运行结束,应该调用哪些函数。

但是,在回调函数方面,jQuery的功能非常弱。为了改变这一点,jQuery开发团队就设计了deferred对象。

简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行。

这里先不说deferred的概念,我们先看一个例子。

还记得初学的时候,遇到一个实例,先是要ajax请求一个接口(a.json),从返回的数据中获得一个id1值。然后再请求一个接口(b.json)获得id2,最后需要对这两个id值同时进行操作。

错误解法

那个时候初学,首先想到的方案(现在想想,很傻很天真...)

var id1, id2;
$.ajax({
url: 'a.js',
dataType: 'json',
type: 'get',
success: function(d){
id1 = d.item.id;
}
});
$.ajax({
url: 'b.js',
dataType: 'json',
type: 'get',
success: function(d){
id2 = d.item.id;
}
})
alert('id1='+id1+','+ 'id2='+ id2);

因为那个时候,还没有理解异步的概念,所以以为,第二次ajax的时候id已经有值了,但是运行之后才发现,变量id其实根本没被赋值。想要测试上面代码,点这里

也就是这一刻,我真正明白了:ajax是异步的!!!。

傻瓜式解法

发现上面那个方法不能用之后,分析了一下,弹出undefined是因为弹出之前id还没有被赋值,那我保证在弹出之前给id赋值不就解决了吗?好的,于是我想到了下面这个方法:

var id1; 
$.ajax({
url: '/test/json/a.js',
dataType: 'json',
type: 'get',
success: function(d){
id1 = d.item.id;
$.ajax({
url: '/test/json/b.js',
dataType: 'json',
type: 'get',
success: function(f){
id2 = f.item.id;
alert('id1='+id1+','+ 'id2='+ id2);
}
});
}
})

逻辑虽然正确了,但总觉得怪怪的,如果这里需要嵌套3层呢?4层呢?。。。ajax里面嵌套ajax,如果数据很多,访问速度慢,嵌套更多层,会导致性能下降、影响用户体验、代码不好维护等等问题。所以一般不推荐这种方法。总之,这种写法让我难以接受。

所以思来想去,觉得不妥。。。然后那个时候就在一个前端群里,询问各种大牛,直到一个大牛告诉我让我百度一下deferred,后来认真学习了下,觉得不错。

使用deferred对象

deferred对象简介

deferred是jquery中的扩展的一个对象(1.5.0以上的版本支持deferred)。defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行。

简单说,deferred对象就是jQuery的回调函数解决方案。

再简单说,deferred对象用来管理异步操作,而ajax就是一种异步操作。

deferred基本语法

deferred让ajax支持新的写法,代码如下:

$.ajax({
url: '/test/json/a.js',
dataType: 'json',
type: 'get'
})
.done(function() {
alert("成功啦!");
})
.fail(function() {
alert("失败了...");
})

这个大家应该都知道。现在在编辑器敲入ajax,然后回车,提示的ajax语法结构就是这样链式的写法。

done函数就是ajax请求成功的回到函数;

fail函数就是ajax请求失败的回调函数。

使用deferred的解决方法

var ajax1 = $.ajax({
url: '/test/json/a.js',
dataType: 'json',
type: 'get'
});
var ajax2 = $.ajax({
url: '/test/json/b.js',
dataType: 'json',
type: 'get',
});
$.when(ajax1,ajax2).done(function(d1,d2){
var id1 = d1[0].item.id;
var id2 = d2[0].item.id;
alert('id1='+id1+', '+ 'id2='+ id2);
}).fail(function(){
alert('error');
});

值得一提的是,上面代码中done函数的参数,对应的是前面每一个ajax请求返回的数据

上面的代码中,用到了deferred对象的when方法。

它的描述是:

提供一种方法来执行一个或多个对象的回调函数。

这里的ajax1和ajax2就是deferred对象,done和fail就是回调函数。上面代码的意思是:

只有当两个ajax请求都成功返回数据时,执行done函数;只要有一个请求不成功,就执行fail函数。

另外值得一提的是:$.when方法的参数,只支持deferred对象,而ajax返回的就是deferred对象。`

这就已经实现了上面的需求了。请求两个接口,获得两个数据,都成功时,对这两个数据同时进行处理。而且这种链式写法,让读者一目了然,而且便于维护扩展。

deferred方法汇总

提到的方法

$.Deferred():生成一个deferred对象。

$.when() 为多个操作指定回调函数。

deferred.done():指定操作成功后的回调函数

deferred.fail():指定操作失败后的回调函数

未提到的方法

•deferred.resolve()方法和deferred.reject()方法

deferred对象执行回调函数之前会有一个执行状态的存在,执行状态一共有三种———未完成、已完成和已失败。

未完成状态,则会继续等待,或者执行progress()指定的回调函数。

已完成状态,则会执行done()方法指定的回调函数。

已失败状态,则会执行fail()方法指定的回调函数。

所以这里的deferred.resolve()方法就是手动将deferred对象的状态改为已完成,继而执行done方法; deferred.reject()方法就是手动将状态改为已失败,继而执行fail方法。

下面来看一个例子:

var defer = $.Deferred(); // 新建一个Deferred对象

var wait = function(defer){


var tasks = function(){
defer.resolve(); // 改变Deferred对象为已完成状态


 alert("执行完毕!");


};


setTimeout(tasks,5000);


return defer;

};
  $.when(wait(defer))

.done(function(){

 alert("succeed"); 

 })

.fail(function(){

 alert("failed"); 

});

结果:等待5秒钟,先弹出“succeed”,在弹出“执行完毕!”。

分析一下代码执行过程:

$.when()里面的参数是wait函数,也就是一个deferred对象,所以可以继续执行setTimeout函数,等待5s,执行tasks函数,然后手动改变了状态为“已完成”,所以执行done方法,弹出“succeed”,然后弹出“执行完毕!”。

deferred.then():有时为了省事,可以把done()和fail()合在一起写,这就是then()方法。

function successFun(){
alert("yes");
}
function failFun(){
alert('fail');
}
$.when($.ajax({
url: '/test/json/a.js',
dataType:'json',
type: 'get'
}))
.then(successFun, failFun);

当then方法只有一个参数时,相当于done方法。当有两个参数时,第一个相当于done方法,第二个相当于fail方法。

总结

deferred对象通过对一个ajax请求的各种回调函数的控制,让jquery写ajax变的简单、容易维护、容易扩展。

以上所述是小编给大家介绍的jQuery通过deferred对象管理ajax异步的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
详谈javascript中的cookie
Jun 03 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
Bootstrap3学习笔记(三)之表格
May 20 #Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 #Javascript
Bootstrap3学习笔记(二)之排版
May 20 #Javascript
js获取iframe中的window对象的实现方法
May 20 #Javascript
BootStrap3学习笔记(一)之网格系统
May 20 #Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 #Javascript
Bootstrap表格和栅格分页实例详解
May 20 #Javascript
You might like
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python制作刷网页流量工具
2017/04/23 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
基于Python函数和变量名解析
2019/07/19 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
python 如何区分return和yield
2020/09/22 Python
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
培训主管岗位职责
2014/02/01 职场文书
小学生暑假家长评语
2014/04/17 职场文书
党性教育心得体会
2014/09/03 职场文书
学校联谊协议书
2014/09/16 职场文书
2014年村委会工作总结
2014/11/24 职场文书
离婚案件上诉状
2015/05/23 职场文书
节水宣传标语口号
2015/12/26 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
浅谈JS的二进制家族
2021/05/09 Javascript
Python django中如何使用restful框架
2021/06/23 Python
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技