浅谈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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
各种常用的JS函数整理
Oct 25 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
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
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
Smarty3配置及入门语法
2017/02/22 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
php析构函数的具体用法小结
2014/03/11 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
ES6 十大特性简介
2020/12/09 Javascript
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
python实现画一颗树和一片森林
2018/06/25 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python zip()函数的使用示例
2020/09/23 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
Python eval函数介绍及用法
2020/11/09 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
司法局火灾防控方案
2014/06/05 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
工程移交协议书
2016/03/24 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
pandas中关于apply+lambda的应用
2022/02/28 Python
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技