浅谈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 相关文章推荐
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
vue+高德地图写地图选址组件的方法
May 18 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 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 curl模拟post请求小实例
2013/11/13 PHP
php自动载入类用法实例分析
2016/06/24 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
Express系列之multer上传的使用
2017/10/27 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
布同自制Python函数帮助查询小工具
2011/03/13 Python
python如何通过protobuf实现rpc
2016/03/06 Python
python浪漫表白源码
2019/04/05 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
在职证明书模板
2015/06/15 职场文书
教导处教学工作总结
2015/08/12 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python