以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题


Posted in Javascript onNovember 13, 2015

Promises是一种令代码异步行为更加优雅的抽象,它很有可能是JavaScript的下一个编程范式,一个Promise即表示任务结果,无论该任务是否完成。

在一些现代浏览器中已经提供了原生的Promise对象,其遵循Promise/A+标准。在jQuery1.5+,提供了$.Deferred(其可以被转化为promise对象)。很多知名的框架中,也提供了promise对象。promise对象在javascript中已经是一种很重要的模式,它在解决异步问题时表现出的优雅,正是javascript所需要的。以下以jQuery中的$.Deferred对象为例,来看一下promise对象是如何处理异步问题。关于$.Deferred对象,可以到jQuery官网查看,这里就不赘述了。

一、封装异步操作

首先,我们以加载图片为例,看以下代码:

//加载图片函数
var loadImg = function(url){
var img = new Image() , deferred = $.Deferred() ;
 img.src = url ;
 img.onload = function(){
  //成功则触发deferred.resolve


deferred.resolve( this ) ;
 } ;
 img.onerror = function(e){

  //失败则触发deferred.reject
  deferred.reject( e );
 } ;

//返回promise对象
 return deferred.promise() ;
} ;
//请求图片
var request = loadImg('http://r2.ykimg.com/0515000054AFFC2D6737B343930AFAD6') ;
//请求成功
request.done(function(img){

//code
}) ;
//可以注册多个回调,当请求成功时,会按注册的顺序执行,fail和always也有此性质
request.done(function(img){

// code
});
//请求失败
request.fail(function(){

// code
}) ;
//请求完毕
request.always(function(){

//code
});

以上的代码,我封装了图片加载的操作,将他们委托给$.Deferred,最后生成一个promise返回。使用这样的方式,相比用对外暴露回调的方式,显得更干净、更清晰。这么做的另一个更重要的原因是,promise的连接。

二、promise的连接

我们还是以上面图片加载的代码为例,来看一下如何做promise的连接,看以下代码:

var request = loadImg('http://b1.hucdn.com/upload/item/1411/13/89613257775992_800x800.jpg') ;
request.done(function(img){
//code
}) ;
//request连接别的promise之后返回的promise
var request3 = request.then(function(img){

//request执行成功时 连接request1

var request1 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ;

return request1 ;
},function(e){

//request执行失败时 连接request2

var request2 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ;

return request2 ;
});
//request执行并且request1或request2成功执行时
request3.done(function(done){

//code
}) ;

 promise对象提供了then的方法,它接受两个回调:onResolve和onReject,在回调中返回promise,就可以完成promise之间的连接。通过这种方式,可以使异步操作串行的执行。

同时,jQuery还提供了另外一种连接方式,看代码:

var request = loadImg('http://b1.hucdn.com/upload/item/1412/23/48188827139381_800x800.jpg') ;
var request1 = loadImg('http://b1.hucdn.com/upload/item/1412/06/50258594673502_800x800.jpg') ;
//通过$.when连接promise
var request2 = $.when(request,request1) ;
request2.done(function(img,img){
//code
}) ;

jQuery中提供了$.when这个函数,它可以接受n个promise对象为参数,它是将promise的执行结果连接在一起。使用这种方式,多个异步操作可以并行执行。

三、The End

这里的代码是以加载图片为例,同样的做法可以应用到其他的异步操作中去。比如jQuery中的$.ajax、$.fn.animate,调用它们返回的就是promise。在node端,也可以把一些异步操作(读数据库、读文件等)封装成promise。继而对多个promise实现合并的操作,使其串行或者并行执行。

附:deferred对象

deferred除了用于转化promise对象外,本身也是个很有用的对象。它除了提供像promise对象的那些方法和属性外,还有notify函数和progress函数,这两个函数在实现进度条和瀑布流的时候,有很大的用处。

   在实现进度条时,resolve和done函数可以用于定义进度条读取到100%时的触发时机和触发逻辑,notify和progress函数可以用于定义进度条在读取中的触发时机和触发逻辑。reject和fail函数可以用于定义进度读取失败时的触发时机和触发逻辑。

   在实现瀑布流时,resolve和done函数可以用于定义当数据已经全部加载到页面的触发时机和触发逻辑,notify和progress函数可以用于定义瀑布流读取下一页的触发时机和触发逻辑。

Javascript 相关文章推荐
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
juqery 学习之四 筛选查找
Nov 30 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
Jquery promise实现一张一张加载图片
Nov 13 #Javascript
jquery转盘抽奖功能实现
Nov 13 #Javascript
javascript生成随机数方法汇总
Nov 12 #Javascript
js正则表达式验证邮件地址
Nov 12 #Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 #Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 #Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 #Javascript
You might like
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
python判断端口是否打开的实现代码
2013/02/10 Python
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
python实现感知器
2017/12/19 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
tensorflow 获取变量&打印权值的实例讲解
2018/06/14 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
django框架forms组件用法实例详解
2019/12/10 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
Python字符串三种格式化输出
2020/09/17 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
写好自荐信的技巧
2013/11/08 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
初中英语教学反思
2014/01/25 职场文书
机械工程师岗位职责
2014/06/16 职场文书
商铺消防安全责任书
2014/07/29 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript