浅谈Angular的$q, defer, promise


Posted in Javascript onDecember 20, 2016

1. $q

$q是Angular的一种内置服务,它可以使你异步地执行函数,并且当函数执行完成时它允许你使用函数的返回值(或异常)。

2. defer

defer的字面意思是延迟,$q.defer() 可以创建一个deferred实例(延迟对象实例)。

deferred 实例旨在暴露派生的Promise 实例,以及被用来作为成功完成或未成功完成的信号API,以及当前任务的状态。这听起来好复杂的样子,总结$q, defer, promise三者之间的关系如下所示。

var deferred = $q.defer(); //通过$q服务注册一个延迟对象 deferred
var promise = deferred.promise; //通过deferred延迟对象,可以得到一个承诺promise,而promise会返回当前任务的完成结果

defer的方法:

  • deferred.resolve(value)  成功解决(resolve)了其派生的promise。参数value将来会被用作promise.then(successCallback(value){...}, errorCallback(reason){...}, notifyCallback(notify){...})中successCallback函数的参数。
  • deferred.reject(reason)  未成功解决其派生的promise。参数reason被用来说明未成功的原因。此时deferred实例的promise对象将会捕获一个任务未成功执行的错误,promise.catch(errorCallback(reason){...})。补充一点,promise.catch(errorCallback)实际上就是promise.then(null, errorCallback)的简写。
  • notify(value)  更新promise的执行状态(翻译的不好,原话是provides updates on the status of the promise's execution)

defer的小例子:   

function asyncGreet(name) {
 var deferred = $q.defer(); //通过$q.defer()创建一个deferred延迟对象,在创建一个deferred实例时,也会创建出来一个派生的promise对象,使用deferred.promise就可以检索到派生的promise。
 deferred.notify('About to greet ' + name + '.'); //延迟对象的notify方法。
 if (okToGreet(name)) {
 deferred.resolve('Hello, ' + name + '!'); //任务被成功执行
 } else {
 deferred.reject('Greeting ' + name + ' is not allowed.'); //任务未被成功执行
 }
return deferred.promise; //返回deferred实例的promise对象
}
function okToGreet(name) {
 //只是mock数据,实际情况将根据相关业务实现代码
 if(name == 'Superman') return true; 
 else return false;
}
var promise = asyncGreet('Superman'); //获得promise对象
//promise对象的then函数会获得当前任务也就是当前deferred延迟实例的执行状态。它的三个回调函数分别会在resolve(), reject() 和notify()时被执行
promise.then(function(greeting) {
 alert('Success: ' + greeting);
}, function(reason) {
 alert('Failed: ' + reason);
}, function(update) {
 alert('Got notification: ' + update);
});

3. promise

当创建一个deferred实例时,promise实例也会被创建。通过deferred.promise就可以检索到deferred派生的promise。

promise的目的是允许interested parties 访问deferred任务完成的结果。

按照CommonJS的约定,promise是一个与对象交互的接口,表示一个动作(action)的结果是异步的,而且在任何给定的时间点上可能或不可能完成。(这句话好绕口,我的理解是promise相当于一个承诺,承诺你这个任务在给定的时间点上可能会完成,也可能完成不了。如果完成了那就相当于resolve, 如果未完成就相当于reject。不知道这样理解对不对?)

promise 的方法:

  • then(successCallback, errorCallback, nitifyCallback) 根据promise被resolve/reject,或将要被resolve/reject,调用successCallback/errorCallback。
  • catch(errorCallback)  then(null, errorCallback)的缩写。
  • finally(callback, notifyCallback)

补充说明:

promise.then()会返回一个新的衍生promise,形成promise链。例如:
promiseB = promiseA.then(function(result) {
 return result + 1;
});
// promiseB will be resolved immediately after promiseA is resolved and its value
// will be the result of promiseA incremented by 1

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery 事件对象属性小结
Apr 27 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
js编写简单的聊天室功能
Aug 17 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
BootStrapTable服务器分页实例解析
Dec 20 #Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 #Javascript
bootstrap多种样式进度条展示
Dec 20 #Javascript
JS封装通过className获取元素的函数示例
Dec 20 #Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 #Javascript
jquery+html仿翻页相册功能
Dec 20 #Javascript
JS实现拖拽的方法分析
Dec 20 #Javascript
You might like
PHP令牌 Token改进版
2008/07/18 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
php简单中奖算法(实例)
2017/08/15 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
javascript实现的闭包简单实例
2015/07/17 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python使用numpy实现BP神经网络
2018/03/10 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
学习型党组织建设经验材料
2014/05/26 职场文书
个人作风建设自查报告
2014/10/22 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
golang import自定义包方式
2021/04/29 Golang