浅谈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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
微信小程序canvas动态时钟
Oct 22 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 Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
ThinkPHP模型详解
2015/07/27 PHP
Laravel 5.3 学习笔记之 错误&日志
2016/08/28 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
Javascript基础教程之变量
2015/01/18 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
python实现学生通讯录管理系统
2021/02/25 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
初中生三年学习生活的自我评价
2013/11/03 职场文书
开学典礼感言
2014/02/16 职场文书
法人代表委托书
2014/04/04 职场文书
小学教师师德承诺书
2014/05/23 职场文书
采购员岗位职责
2015/02/03 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript