在AngularJS中是如何实现数据异步调用的？

最新推荐文章于 2021-01-31 20:10:35 发布

LEE1996JUN

最新推荐文章于 2021-01-31 20:10:35 发布

阅读量741

点赞数 1

本文链接：https://blog.csdn.net/lee1996jun/article/details/79813456

版权

$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>

LEE1996JUN

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在AngularJS中是如何实现数据异步调用的？

$q服务是AngularJS封装的一种轻量级的 Promise实现。$q服务既可调用它的构造器（调用构造器时返回一个Promise对象），也可调用如下方法。 1.defer()：创建一个deferred对象，这个对象可以执行几个常用的方法，比如resolve、reject和notify等方法。 2.all（）：传入Promise的数组，用于批量执行，该方法也返回一个P...
复制链接

扫一扫