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

最新推荐文章于 2024-08-11 09:48:00 发布

dl0246

最新推荐文章于 2024-08-11 09:48:00 发布

阅读量265

点赞数

本文链接：https://blog.csdn.net/dl0246/article/details/78255447

版权

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