什么是promise
promise是一种用异步的方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或者抛出的异常,在与远程对象打交道时我们可以把他看作是远程对象的一个代理。 如果说是promise也是异步处理方式的一种,那么我们会想起它和XHR和$.ajax有啥区别呢?
习惯上js使用闭包或者回调来相应非同步返回的数据,比如页面加载之后的XHR请求。我们可以跟数据进行正常交互,就好像它已经返回了一样,而不需要依赖回调函数的触发。
那么ng提出的promise是为了解决什么问题呢? 回调已经被使用了很长时间,通常如果有回调依赖其他回调时侯将会让调试变得非常艰难,每一步调用之后都需要显示处理错误。与之不同的是promise提供了另外一个抽象:这些函数返回promise对象。
从一定层面上看ng改变的不是简单的改变代码风格,而是让我对一些思维习惯发起了反思和改善
为什么使用promise
promise是头等对象,自带了一些约定。
只有一个resolve或者reject会被调用到。
如果promise被执行或者被拒绝了,依赖于他们的处理程序仍然会被调用。
处理程序总是会被异步调用。
想要在angularjs中创建promise,可以使用内置的$q服务,$q服务在它的deferred API中提供了一些方法。
angular.module('ngApp',[]).
factory('UserInfoService',['$q',function($q){
//code here
}])
要创建一个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的执行或者拒绝,而无需修改结果的值。通常就做一些资源的清理工作。
我们来看一个angularjs promise的对象解析:
demo.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>demo</title>
</head>
<body>
<div ng-controller="MainCtrl">{{user}}</div>
</body>
<script type="text/javascript" src='./angular/angular.js'></script>
<script type="text/javascript" src="controller.js"></script>
</html>
controller.js
var myapp = angular.module('myapp', []);
myapp.factory('UserInfoService',function($http, $q) {
return {
query: function() {
var defer = $q.defer();//声明延后执行
$http({
method: 'GET',
url: 'data/data.json'//获取json数据
}).success(function(data, status, headers, config) {
defer.resolve(data);//执行成功
}).error(function(data, status, headers, config) {
defer.reject();//执行失败
});
return defer.promise;//返回获取的数据
}
}
});
myapp.controller('MainCtrl',function($scope, UserInfoService){
var promise = UserInfoService.query(); //同步调用,获取promise的接口
promise.then(function(data) {
$scope.user = data; //调用接口,如果获取数据成功 resolve()方法
},
function(data) {
$scope.user = {
error: 'data was not found...'//如果获取数据失败,调用reject()方法
};
});
});
要显示的数据:data.json
[{
"id": "1",
"firstname": "Misko",
"lastname": "Havery",
"company": "Google",
"project": "AngularJS"
}, {
"id": "2",
"firstname": "Srini",
"lastname": "Kusunam",
"company": "LibertyLeap",
"project": "Backbone.Paginator"
}, {
"id": "3",
"firstname": "Derick",
"lastname": "Bailey",
"company": "Muted Solutions",
"project": "Backbone.Marionette"
}]