您的位置：首页 > Web前端 > AngularJS

angularjs速成学习个人理解_6$q服务的promise

2017-10-16 22:45 411 查看

$http API是基于被$q 服务暴露的deferred/promise（延迟的/承诺）API 。所谓延迟与承诺，可以理解为通过$q.reject(信息)封装异常信息的对象promise 进行封装异常信息的显示。再通过promise的回调成功（正常时信息），回调失败（有异常信息的场景下）。

使用factory主要返回一个对象。

首先创建一个factory

定义个factory名字dataSer，当调用dataSer对象时可以获取对象的属性与函数myApp.factory("dataSer", function($http, $q) {
getJson: function() {
return promise对象;
}
});

那么我们就可以在控制器中获取dataSer服务。dataSer.getJson()获取返回promise对象。

promise对象可以调用then链进行成功与失败时函数调用。如下：
dataSer.getJson().then(function(data) {
$scope.result = data;
}, function(error) {
$scope.result = error;
});

其中data与error为$q.reject（封装的异常信息）.
案例完整代码如下：详细的查看注释，如有问题可以回复

<!DOCTYPE html>

<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Promise - AngularJS Test</title>
<style type="text/css">
.test-div {margin:15px;padding:15px;border:1px solid #ccc;}
</style>
</head>
<body>
<div class="test-div" ng-controller="myCtrl">
{{result}}
</div>

<script type="text/javascript" src="static/js/angular-1.5.8.js"></script>
<script type="text/javascript">
/**
* $q -是一个服务，帮助我们运行异步函数，并且当他们运行完时，用函数的返回值(或异常场景)，
* -> defered -> promise$q
*/

var myApp = angular.module("myApp", []);

//使用factory()创建Service
myApp.factory("dataSer", function($http, $q) {
return {
getJson: function() {
// $http API是基于被$q 服务暴露的deferred/promise（延迟的/承诺）API
。 // 这个函数返回一个默认的承诺（成功时正常信息与异常信息的封装）

return $http.get("data/players.json").then(function(resp) {
if(typeof resp.data === "object") {
// 成功时的信息
return resp.data;
}else {
// 异常信息1
return $q.reject(resp.data);
}
}, function(resp) {
// 异常信息2
return $q.reject(resp.status);
});
}
};
});

myApp.controller("myCtrl", function($scope, dataSer) {
//dataSer.getJson() returns a promise
dataSer.getJson().then(function(data) {
// 成功时data代表返回的json对象
$scope.result = data;
}, function(error) {
// 异常信息：ajax返回的不是一个json对象时error代表异常信息1，
// 例如：404资源不存在时显示的是异常信息2
$scope.result = error;
});
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航