以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禁止页面操作的示例代码
Dec 17 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
详解使用React进行组件库开发
2018/02/06 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
python动态监控日志内容的示例
2014/02/16 Python
Python处理字符串之isspace()方法的使用
2015/05/19 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Python将string转换到float的实例方法
2019/07/29 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
什么是Remote Module
2016/06/10 面试题
学习全国两会精神心得体会范文
2014/03/17 职场文书
劳动竞赛口号
2014/06/16 职场文书
教书育人演讲稿
2014/09/11 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书