promise对象，以及其在Angular中的使用

promise

一种处理异步编程的模式，可以有效解决回调的繁琐，并以一种同步的方式去处理业务流程，同时，允许在回调中采用链式的写法，处理的代码更加优雅。



  想要在Angular中创建一个

promise

对象，必须在模板中先注入

$q

服务，并先调用

defer

方法创建一个延期对象：

angular.module('myapp',[])
.controller('myController',['$scope','$q',function($scope,$q){
var defer=$q.defer();
}])

  其中，

defer

是一个延期对象，它包括三个方法：

notify  resolve  reject

，以及一个名为

promise

的属性。

  在这3个方法中，都可以通过value参数进行传值，当调用延期对象的

promise

属性时，就创建了一个

promise

对象。

  一旦创建了

promise

对象，就可以通过调用

then

的方法来执行延期对象不同操作后的回调函数：

  

promise.then(successCallback,errorCallback,notifyCallback)

5.1

promise

对象的创建使用

<div ng-controller='myController'>
<div>
<div>{{t0}}</div>
<div>{{t1}}</div>
<button ng-click='action(true)'>解决</button>
<button ng-click='action(false)'>拒绝</button>
</div>
</div>

<script type="text/javascript">
angular.module('myapp',[])
.controller('myController',['$scope','$q',function($scope,$q){
var defer=$q.defer();
$scope.action=function(type){
defer.notify(0);
type?defer.resolve(1):defer.reject(1);
}
var promise=defer.promise;
promise.then(function(n){
n++;
$scope.t1='已处理完成：'+n;
},function(n){
n++;
$scope.t1='未完成原因：'+n;
},function(n){
n++;
$scope.t0='正在处理中：'+n;
})
}])
</script>

  值得注意的是，无论是调用

resolve

还是

reject

，都需要首先调用

notify

。

  此外，在

$q

中，还有一个

all

方法，该方法的功能是返回一个新的

promise

对象，方法的参数是一个

promise

数组，当数组中所有的

defer

都解决时，才会饭一个解决后的

promise

对象，否则，只要有一个defer对象调用了

reject

,那么，返回对象也将调用

reject

方法。

5.2

promise

在

$Http

中的应用

<div ng-controller='myController'>
<div>
{{result}}
</div>
</div>

<script type="text/javascript">
angular.module('myapp',[])
.factory('async',['$q','$http',function($q,$http){
var defer=$q.defer();
$http.get('/async')
.then(function(data){
defer.resolve(data);
},function(reason){
defer.reject(reason);
});
return defer.promise;
}])
.controller('myController',['$scope','async',function($scope,async){
var promise=async;
promise.then(function(resp){
$scope.result='请求成功：'+resp.data;
},function(resp){
$scope.result='请求成功：'+resp;
})
}])
</script>

  对应的服务器端代码(Express)：

app.get('/async',function(req,res){
res.send('今天天气不错。');
});