浅谈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解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
详解vue中axios的封装
Jul 18 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
简单的页面缓冲技术
2006/10/09 PHP
php 注释规范
2012/03/29 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
git进行版本控制心得详谈
2017/12/10 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
入党申请人的自我鉴定
2013/12/01 职场文书
开学典礼主持词
2014/03/19 职场文书
职业规划实施方案
2014/06/10 职场文书
主要领导对照检查材料
2014/08/26 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript