浅谈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 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
vue实现户籍管理系统
May 29 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 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中Snoopy类用法实例
2015/06/19 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
PHP常用的小程序代码段
2015/11/14 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
关于js注册事件的常用方法
2013/04/03 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
js实现下一页页码效果
2017/03/07 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
Python常用模块介绍
2014/11/21 Python
Python 列表list使用介绍
2014/11/30 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
Django框架模板介绍
2019/01/15 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
Python reques接口测试框架实现代码
2020/07/28 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
生产车间班组长岗位职责
2014/01/06 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
钳工实训报告总结
2014/11/04 职场文书
2015年父亲节寄语
2015/03/23 职场文书