angular中$q用法, $q多个promise串行/同步/等待）， $q.all用法,使用
2024-10-19 20:28:31
$q的基本用法
function fn() {
var defer = $q.defer();
setTimeout(function () {
console.log(1);
defer.resolve(6);
}, 2000);
return defer.promise;
}
fn().then(function (data) {
console.log(data); //2000ms后打印6
}).catch(function (err) {
console.error(err);
});
//或者用$q.when(fn()), 和上面是同样的效果
$q.when(fn()).then(function (data) {
console.log(data);
}).catch(function (err) {
console.error(err);
});
$q多个promise串行
function f1() {
var defer = $q.defer();
setTimeout(function() {
defer.resolve(1);
}, 2000);
return defer.promise;
}
function f2() {
var defer = $q.defer();
setTimeout(function() {
defer.resolve(2);
}, 2000);
return defer.promise;
}
function f3() {
var defer = $q.defer();
setTimeout(function() {
defer.resolve(3);
}, 2000);
return defer.promise;
}
//f1进行完，在进行f2，然后进行f3，后一个程序等待前一个完成
f1().then(function (data) {
console.log(data); // 2s后打印1
return f2();
}).then(function (data) {
console.log(data); // 再过2s后打印2
return f3();
}).then(function (data) {
console.log(data); // 再过2s后打印3
});
$q.all
$q.all是用于执行多个异步任务进行回调，它可以接受一个promise的数组，或是promise的hash(object)。任何一个promise失败，都会导致整个任务的失败。
$q.all中接收多个promise是同时进行的。
例1：接受一个promise的hash(object)：
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl1">
</div>
<script>
var app = angular.module('app',[]);
app.controller('ctrl1',['$scope','$q',function($scope,$q){
var deferA = $q.defer();
setTimeout(function(){
deferA.resolve('this is DATA A')
},500);
var deferB = $q.defer();
setTimeout(function(){
deferB.resolve('this is DATA B');
},1000);
var p=$q.all({
dataA:deferA.promise,
dataB:deferB.promise
})
p.then(function(result){
console.log(result.dataA); // this is DATA A
console.log(result.dataB); // this is DATA B
})
.catch(function(error){
console.error(error);
})
}]) </script>
</body>
</html>
例2：接受一个promise数组：
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl1">
</div>
<script>
var app = angular.module('app',[]);
app.controller('ctrl1',['$scope','$q',function($scope,$q){
var deferA = $q.defer();
setTimeout(function(){
deferA.resolve('this is DATA A')
},500);
var deferB = $q.defer();
setTimeout(function(){
deferB.resolve('this is DATA B');
},1000);
var p=$q.all([
deferA.promise,
deferB.promise
]);
p.then(function(result){
console.log(result[0]); // this is DATA A
console.log(result[1]); // this is DATA B
})
.catch(function(error){
console.error(error);
})
}]) </script>
</body>
</html>
参考：http://blog.csdn.net/shidaping/article/details/52398925
最新文章
- CodeForces - 404B(模拟题)
- 梯度下降法VS随机梯度下降法 (Python的实现)
- JMS消息头
- POJ3320 Jessica's Reading Problem(尺取+map+set）
- 一个"Median Maintenance"问题
- 【alpha冲刺】随笔合集
- hadoop java上传文件
- Linux记录-HDFS副本机制
- iOS: 并发编程的几个知识点
- 不一样的go语言-gopher
- SQL注入之Sqli-labs系列第八篇（基于布尔盲注的注入）
- 环境变量、cp、mv、cat 等命令
- 20145221《网络对抗》PC平台逆向破解
- electron 截图为空
- Python并行编程(一)：基本概念
- 4 关于word2vec的skip-gram模型使用负例采样nce_loss损失函数的源码剖析
- JavaScript 时间对象 date()
- Python3 Tkinter-PaneWindow
- 经常使用meta标签属性
- TP5.0：访问不同模块方法，跳转视图页面