浅谈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函数内部this指针指向的三种方法
Apr 23 Javascript
一些经常会用到的Javascript检测函数
May 31 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
Vue.js的模板语法详解
Feb 16 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
phpize的深入理解
2013/06/03 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
vue2.0全局组件之pdf详解
2017/06/26 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
Vue性能优化的方法
2020/07/30 Javascript
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
计算机专业学生的自我评价
2013/12/15 职场文书
图书馆标语
2014/06/19 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
贷款担保书范本
2015/09/22 职场文书
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技