浅谈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弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
Javascript函数式编程语言
Oct 11 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 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 empty函数判断mysql表单是否为空
2010/04/12 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
使用Python的PIL模块来进行图片对比
2016/02/18 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
美发店5.1活动方案
2014/01/24 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
奶茶店创业计划书
2014/08/14 职场文书
个人整改方案范文
2014/10/25 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
高温慰问简报
2015/07/21 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Linux中文件的基本属性介绍
2022/06/01 Servers
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS