浅谈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 相关文章推荐
JS 类型转换常见方法小结
May 31 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 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
提问的智慧
2006/10/09 PHP
初级的用php写的采集程序
2007/03/16 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
jquery中动态效果小结
2010/12/16 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
Angular2库初探
2017/03/01 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
python字符串排序方法
2014/08/29 Python
Python3.6正式版新特性预览
2016/12/15 Python
Django中多种重定向方法使用详解
2019/07/17 Python
Python 如何提高元组的可读性
2019/08/26 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
python drf各类组件的用法和作用
2021/01/12 Python
Python实现粒子群算法的示例
2021/02/14 Python
美国糖果店:Sugarfina
2019/02/21 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
工厂车间标语
2014/06/19 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
盗窃案辩护词
2015/05/21 职场文书
导游词之五台山
2019/10/11 职场文书