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

﹏ヽ暗。殇╰゛Y 2022-06-07 08:52 186阅读 0赞

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