浅谈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 相关文章推荐
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
生产制造追溯系统之再说条码打印
Jun 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
PHP注释实例技巧
2008/10/03 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
php操作xml
2013/10/27 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
python实现图片横向和纵向拼接
2020/03/05 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
一套PHP的笔试题
2013/05/31 面试题
会计系个人求职信范文分享
2013/12/20 职场文书
小学清明节活动方案
2014/03/08 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
房产代理公证处委托书
2014/04/04 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
先进党支部申报材料
2014/12/24 职场文书
支行行长岗位职责
2015/02/15 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书