angular中使用promise

promise是一种用异步的方式处理值的方法，promise是对象，代表了一个函数最终可能的返回值或者抛出的异常，在与远程对象打交道时我们可以把他看作是远程对象的一个代理。如果说是promise也是异步处理方式的一种，那么我们会想起它和XHR和$.ajax有啥区别呢？

习惯上js使用闭包或者回调来相应非同步返回的数据，比如页面加载之后的XHR请求。我们可以跟数据进行正常交互，就好像它已经返回了一样，而不需要依赖回调函数的触发。

那么ng提出的promise是为了解决什么问题呢？回调已经被使用了很长时间，通常如果有回调依赖其他还回调时将会时调试变得非常艰难，每一步调用之后都需要显示处理错误。与之不同的是promise提供了另外一个抽象：这些函数返回promise对象。

从一定层面上看ng改变的不是简单的改变代码风格，而是让我对一些思维习惯发起了反思和改善。

常规模式，即回调方法：

User.get(fromId,{

    success:function(){

          user.friends.find(toId,function(){})

    },

    failure:function(){}

})

使用ng的$q模式

User.get(fromId).

   then(function(user){

    },function(err){

})

使用了promise的收获之一是逃脱了回调的固定思维逻辑。promise让异步处理的机制看上去更像是同步，基于同步函数我们可以按照预期来捕获返回值和异常值。可以在程序中的任何时刻捕捉错误，并且绕过依赖于程序异常的后续代码，我们不需要思考这个同步带来的好处。因此使用promise的目的是：获取功能组合和错误冒泡能力的同时，保持代码异步运行的能力。

promise是头等对象，自带了一些约定。

只有一个resolve或者reject会被调用到。
如果promise被执行或者被拒绝了，依赖于他们的处理程序仍然会被调用。
处理程序总是会被异步调用。

要创建一个deferred对象，可以调用defer()方法； var deferred= $q.defer()

deferred对象暴露了三个方法，以及一个可以用于处理promise的promise属性。

- resolve(value)。 deferred.resolve({name:"Kobe",Age:36});
- reject(reason)。 deferred.reject("Can't update user");
- notify(value)。这个方法用promise的执行状态进行响应。
- then(successFn,errFn,notifyFn)。
- catch(errFn)。
- finally(callback)。finally允许我们观察promise的执行或者拒绝，而无需修改结果的值。通常就做一些资源的清理工作。

链式请求：　　

GitHubService.then(function(data){

}).then(function(data){

    $scope.Users=data;

});

完整例子：

app.js

angular.module('startApp',[

	'service',

	'demo-controller'

])

controller.js

angular.module('demo-controller',['service'])

.controller('demoCtrl',function(BaseService,$scope,$q){

	BaseService.getNews()

	.then(function(success){

		$scope.newLists = success.newslist;

	},function(error){

		console.log(error);

	})

})

service.js

angular.module('service',[])

.service('BaseService',baseService);

function baseService($q,$http){

	this.page = 1;

	this.num = 10;

	this.baseUrl = 'http://api.huceo.com/guonei/?key=eea12a5aad62c67d0052a563bc86c9e5';

	this.getNews = function(){

		var deferred = $q.defer();

		//

		$http.get(this.baseUrl,{

			 params:{

		        key:"eea12a5aad62c67d0052a563bc86c9e5",

		        num:10,

		        page:1

		      }

		})

		.success(function(success){

			deferred.resolve(success);

		})

		.error(function(error){

			deferred.reject(error);

		})

		return deferred.promise;

	}

}

demo.html

<!doctype html>

<html lang="en" ng-app="startApp">

<head>

	<meta charset="UTF-8" />

	<title>Document</title>

	<script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.1/angular.js"></script>

	<script src="js/app.js"></script>

	<script src="js/service.js"></script>

	<script src="js/controller.js"></script>

</head>

<body>

	<div ng-controller="demoCtrl">

		<ul>

			<li ng-repeat="item in newLists">{{item.title}}</li>

		</ul>

	</div>

</body>

</html>

巴特西

angular中使用promise

最新文章

热门文章