$q服务是AngularJS封装的一种轻量级的 Promise实现。$q服务既可调用它的构造器(调用构造器时返回一个Promise对象),也可调用如下方法。
1.defer():创建一个deferred对象,这个对象可以执行几个常用的方法,比如resolve、reject和notify等方法。
2.all():传入Promise的数组,用于批量执行,该方法也返回一个Promise对象。
3.when():传入一个不确定的参数,如果参数符合Promise标准,就返回一个Promise对象。
下面先示范如何调用$q的构造器来返回Promise对象。
<script type="text/javascript" src="angular-1.6.2.js">
</script>
</head>
<body ng-app="qApp" ng-controller="fkCtrl">
<script type="text/javascript">
function loadData(url)
{
console.log("从"+url+"加载数据");
return "疯狂前端开发讲义";
}
angular.module("qApp",[])
.controller("fkCtrl",function($scope,$q){
function asyncTask(url){
return $q(function(resolve,reject)//使用$q()构造器将一个函数封装成Promise对象,然后即可调用
Promise对象的resolve和reject两个函数。
{ setTimeout(function() { var data=loadData(url); if(data) { resolve(data); } else { reject('加载数据失败'); } },1000); }); } var promise=asyncTask('server.html'); promise.then(function(data) { alert('成功加载数据:'+data); },function(reason){ alert('失败:'+reason); }); });</script>
此外,调用$q服务的defer()方法即可得到一个Deferred对象。程序调用该对象的promise属性同样可以返回一个Promise对象。下面示例示范了$q服务的defer()方法的功能和用法。
<script type="text/javascript" src="angular-1.6.2.js">
</script>
</head>
<body ng-app="qApp" ng-controller="fkCtrl">
<script type="text/javascript">
function loadData(url)
{
console.log("从"+url+"加载数据");
return "疯狂前端开发讲义";
}
angular.module("qApp",[])
.controller("fkCtrl",function($scope,$q){
function asyncTask(url){
var deferred=$q.defer();
setTimeout(function()
{
deferred.notify('开始调用loadData方法');
var data=loadData(url);
if(data){
deferred.resolve(data);
}else{
deferred.reject('加载数据失败');
}
},1000);
return deferred.promise;
}
var promise=asyncTask('server.html');
promise.then(functin(data){
console.log('成功加载数据:'+data);
},function(reason)
{
console.log('失败:'+reason);
},function(update)
{
console.log('收到通知:'+update);
});
});
</script>
</body>