angular $q服务的用法
Promise是一种和callback有类似功能却更强大的异步处理模式,有多种实现模式方式,比如著名的Q还有JQuery的Deffered。
什么是Promise
以前了解过Ajax的都能体会到回调的痛苦,同步的代码很容易调试,但是异步回调的代码,会让开发者陷入泥潭,无法跟踪,比如:
funA(arg1,arg2,function(){
funcB(arg1,arg2,function(){
funcC(arg1,arg2,function(){
xxxx....
})
})
})
本身嵌套就已经很不容易理解了,加上不知何时才触发回调,这就相当于雪上加霜了。
但是有了Promise这种规范,它能帮助开发者用同步的方式,编写异步的代码,比如在AngularJS中可以使用这种方式:
deferABC.resolve(xxx)
.then(funcSuccess(){},funcError(){},funcNotify(){});
当resolve内的对象成功执行,就会触发funcSuccess,如果失败就会触发funcError。有点类似
deferABC.resolve(function(){
Sunccess:funcSuccess,
error:funcError,
notify:funcNotify
})
再说的直白点,Promise就是一种对执行结果不确定的一种预先定义,如果成功,就xxxx;如果失败,就xxxx,就像事先给出了一些承诺。
比如,小白在上学时很懒,平时总让舍友带饭,并且事先跟他说好了,如果有韭菜鸡蛋就买这个菜,否则就买西红柿炒鸡蛋;无论买到买不到都要记得带包烟。
小白让舍友带饭()
.then(韭菜鸡蛋,西红柿炒鸡蛋)
.finally(带包烟)
$q服务
q服务是AngularJS中自己封装实现的一种Promise实现,相对与Kris Kwal's Q要轻量级的多。
先介绍一下$q常用的几个方法:
- defer() 创建一个deferred对象,这个对象可以执行几个常用的方法,比如resolve,reject,notify等
- all() 传入Promise的数组,批量执行,返回一个promise对象
- when() 传入一个不确定的参数,如果符合Promise标准,就返回一个promise对象。
在Promise中,定义了三种状态:等待状态,完成状态,拒绝状态。
关于状态有几个规定:
- 1 状态的变更是不可逆的
- 2 等待状态可以变成完成或者拒绝
defer()方法
在$q中,可以使用resolve方法,变成完成状态;使用reject方法,变成拒绝状态。
下面看看 $q的简单使用:
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="myctrl">
{{test}}
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller("myctrl",["$scope","$q",function($scope, $ q ){
$scope.test = 1;//这个只是用来测试angularjs是否正常的,没其他的作用 var defer1 = $q.defer();
var promise1 = defer1.promise; promise1
.then(function(value){
console.log("in promise1 ---- success");
console.log(value);
},function(value){
console.log("in promise1 ---- error");
console.log(value);
},function(value){
console.log("in promise1 ---- notify");
console.log(value);
})
.catch(function(e){
console.log("in promise1 ---- catch");
console.log(e);
})
.finally(function(value){
console.log('in promise1 ---- finally');
console.log(value);
}); defer1.resolve("hello");
// defer1.reject("sorry,reject");
}]);
</script>
</body>
</html>
其中defer()用于创建一个deferred对象,defer.promise用于返回一个promise对象,来定义then方法。then中有三个参数,分别是成功回调、失败回调、状态变更回调。
其中resolve中传入的变量或者函数返回结果,会当作第一个then方法的参数。then方法会返回一个promise对象,因此可以写成
xxxx
.then(a,b,c)
.then(a,b,c)
.then(a,b,c)
.catch()
.finally()
继续说说上面那段代码,then...catch...finally可以想想成java里面的try...catch...finally。
all()方法
这个all()方法,可以把多个primise的数组合并成一个。当所有的promise执行成功后,会执行后面的回调。回调中的参数,是每个promise执行的结果。
当批量的执行某些方法时,就可以使用这个方法。
var funcA = function(){
console.log("funcA");
return "hello,funA";
}
var funcB = function(){
console.log("funcB");
return "hello,funB";
}
$q.all([funcA(),funcB()])
.then(function(result){
console.log(result);
});
执行的结果:
funcA
funcB
Array [ "hello,funA", "hello,funB" ]
when()方法
when方法中可以传入一个参数,这个参数可能是一个值,可能是一个符合promise标准的外部对象。
var funcA = function(){
console.log("funcA");
return "hello,funA";
}
$q.when(funcA())
.then(function(result){
console.log(result);
});
当传入的参数不确定时,可以使用这个方法。
angular $q服务的用法的更多相关文章
- AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
- Angular通信$q服务和promise对象
promise 约定(promise)是一个对象,表示在未来时间点会发生的某件事情,约定可以是三种状态之一:等待.完成或拒绝.约定将从等待状态开始,然后可以转换为完成或者拒绝状态,一旦约定完成或者被拒 ...
- angular中的$q服务实例
用于理解$q服务 参考:http://www.zouyesheng.com/angular.html#toc39 广义回调管理 和其它框架一样, ng 提供了广义的异步回调管理的机制. $http 服 ...
- Q的进阶用法
Q的实例化用法 #q1 里面的条件都是or的关系 q1=Q() q1.connector = 'OR' q1.children.append(('id',1)) q1.children.append( ...
- $q服务——angular
$q是做为angular的一个服务而存在的,只是对promise异步编程模式的一个简化实现版,源码中剔除注释实现代码也就二百多行,下面开始介绍$q的API. 一.defer对象(延迟对象)可以通$q. ...
- $q服务的API详解
下面我们通过讲解$q的API让你更多的了解promise异步编程模式.$q是做为angularjs的一个服务而存在的,只是对promise异步编程模式的一个简化实现版,源码中剔除注释实现代码也就二百多 ...
- $q服务的使用
1. 创建一个Service,去服务器读取数据: // $q 是内置服务,所以可以直接使用 ngApp.factory('UserInfo', ['$http', '$q', function ($h ...
- angular学习笔记(二十九)-$q服务
angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...
- angularjs服务常见用法
服务可以再应用的整个生命周期内保持数据,不会在切换路由或者重新加载视图时被清楚掉(控制器只有在需要时才被实例化) 服务是一个单例对象,在每个应用中只会被实例化一次 服务在应用的生命周期内保存数据 an ...
随机推荐
- Lua调用自定义C++类
弄了一天终于会Lua调用自定义C++类.不容易啊. 我的电脑是64位的,装了64的Python不行,装了32位的就可以了,靠!下面是报错信息 python pyyaml Cheetah全都是装32位的 ...
- 服务器控件HyperLink的NavigateUrl绑定传参问题
<asp:HyperLink ID="HyperLink1" NavigateUrl='<%# Eval("ProjectID","Mar ...
- BootStrap2学习日记3--响应式布局实用类
BootStrap2中常用的响应式布局类如: visible-phone 仅在 手机平台显示 visible-tablet 仅在 平板电脑显示 visible-desktop 仅 ...
- myeclipse2014如何添加源码反编译工具插件
Eclipse下的Java反编译插件:Eclipse Class Decompiler,整合了目前最好的2个Java反编译工具Jad和JD-Core,并且和Eclipse Class Viewer无缝 ...
- 使用jquery实现局部刷新DIV
实现页面的定时刷新功能:jquery使用的是jquery-1.8.3.min.js1:定时刷新 A界面的一段代码如下:<script type="text/javascript&quo ...
- 接收POst数据流数据
var data = ""; using (StreamReader readStream = new StreamReader(context.Re ...
- Objective-C ,ios,iphone开发基础:JSON解析(使用苹果官方提供的JSON库:NSJSONSerialization)
json和xml的普及个人觉得是为了简化阅读难度,以及减轻网络负荷,json和xml 数据格式在格式化以后都是一种树状结构,可以树藤摸瓜的得到你想要的任何果子. 而不格式化的时候json和xml 又是 ...
- tomcat初识
1.新工作使用tomcat,顺便就把tomcat搜了搜,看了下基础 官网:http://tomcat.apache.org/ 打开官网会发现很多版本6,7,8,9,这些版本都有什么区别呢?tomcat ...
- webBrowser1_DocumentCompleted不停被调用
原文地址:http://blog.csdn.net/shuishenlong/article/details/7950576 关于DocumentCompleted事件,MSDN给出的解释是在文档加载 ...
- HDOJ2019数列有序!
数列有序! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...