浅谈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实现禁止后退的方法
Dec 27 Javascript
事件绑定之小测试  onclick && addEventListener
Jul 31 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
J2EE系统只能是基于web
2015/09/08 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
群众路线对照检查材料
2014/09/22 职场文书
学籍证明模板
2014/11/21 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
入党积极分子考察意见
2015/06/02 职场文书
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
springboot入门 之profile设置方式
2022/04/04 Java/Android
python 闭包函数详细介绍
2022/04/19 Python