jQuery中的Deferred和promise 的区别


Posted in Javascript onApril 03, 2016

Deferred和Promise之间有什么区别呢?

promise

一个promise就是一个由 异步函数返回的对象 。当你想要自己编写一个这样的函数时你需要使用一个deferred。

var promise = $.ajax({
url: "/myServerScript"
});
promise.done(mySuccessFunction); 
promise.fail(myErrorFunction); 
var promise = $.ajax({
url: "/myServerScript"
}); 
promise.then(mySuccessFunction,myErrorFunction);

使用Promises的好处有以下几点:

你可以多次调用done()和fail()函数,并使用不同的回调函数。或许你的一个回调函数用来停止动画,一个用来发起一个新的AJAX请求,一个用来将接受到的数据展示给用户。

var promise = $.ajax({ url: "/myServerScript" });
promise.done(myStopAnimationFunction); promise.done(myOtherAjaxFunction); 
promise.done(myShowInfoFunction); promise.fail(myErrorFunction);

即使在AJAX调用完成之后,你依然可以调用done()和fail()函数,并且回调函数可以立即执行。不同的状态之间并不会发生变量混乱。当一个AJAX调用结束时,它保持了一个成功状态或者失败状态,这个状态不会发生改变。

你可以合并promises。有时你需要同时进行两个AJAX请求并且想要在两个AJAX请求都成功时调用一个函数。为了完成这个任务,你需要使用一个新的$.when()函数:

var promise1 = $.ajax("/myServerScript1"); 
var promise2 = $.ajax("/myServerScript2");
$.when(promise1, promise2).done(function(xhrObject1, xhrObject2) { // 处理两个XHR对象 });

deferred

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

一个 deferred对象 能做的和一个promise对象差不多,但是它有两个函数来触发 done()和fail()函数 。

一个deferred对象拥有一个resolve()函数来处理一个成功的结果并执行与done()相关的函数。reject()函数则用来处理失败的结果并执行与fail()相关的函数。

你可以给resolve()和reject()函数都提供参数,然后它们都将传递给与done()和fail()相关的回调函数。

总结

jQuery 的ajax 就是返回一个promise 对象,里面含有done(), fail()方法; deferred 就是实现返回这个promise 对象的过程。

Javascript 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 #Javascript
jQuery qrcode生成二维码的方法
Apr 03 #Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 #Javascript
AngularJs 60分钟入门基础教程
Apr 03 #Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 #Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 #Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 #Javascript
You might like
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
Angular.js实现动态加载组件详解
2017/05/28 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
python变量赋值方法(可变与不可变)
2019/01/12 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
python线程优先级队列知识点总结
2021/02/28 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
大学生自我评价怎样写好
2013/10/23 职场文书
捐书活动总结
2014/05/04 职场文书
技校毕业生自荐书
2014/05/23 职场文书
中药学专业求职信
2014/05/31 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers