以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 相关文章推荐
Javascript将string类型转换int类型
Dec 09 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
Vue分页组件实例代码
Apr 17 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 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中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
php绘制一个扇形的方法
2015/01/24 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
python使用mysql数据库示例代码
2017/05/21 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Python实现word2Vec model过程解析
2019/12/16 Python
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
绿色学校实施方案
2014/03/31 职场文书
计算机软件专业求职信
2014/06/10 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
求职意向书范本
2015/05/11 职场文书
合作协议书格式范本
2016/03/21 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js