浅谈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 相关文章推荐
JavaScript中json使用自己总结
Aug 13 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
JavaScript实现数值自动增加动画
2017/12/28 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
python如何重载模块实例解析
2018/01/25 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
Python ORM编程基础示例
2020/02/02 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
公司办公室岗位职责
2014/03/19 职场文书
文明市民先进事迹
2014/05/15 职场文书
语文课外活动总结
2014/08/27 职场文书
工作犯错保证书
2015/05/11 职场文书
起诉书范文
2015/05/20 职场文书
贫困证明怎么写
2015/06/16 职场文书
python多次执行绘制条形图
2022/04/20 Python