AngluarJS $q 是受Chris Kowal’s Q库启发(https://github.com/kriskowal/q) 。 这个库通过一个回调“promise”让用户监控异步过程。 下面针对使用pormise的语法进行说明。
var promise = callThatRunsInBackground();
promise.then(
function(answer) {
// do something
},function(error) {
// report something
},function(progress) {
// report progress
});
返回promise的服务有很多，例如$http,$interval,$timeout。
所有的promise返回一个单例对象， 由我们自己决定它来返回什么。例如$http.get 它的返回对象包含四个键值：data,status,header,config. 这些参数与success回调参数一样，如：
// this
$http.get('/api/v1/movies/avengers')
.success(function(data,headers,config) {
$scope.movieContent = data;
});
// is the same as
var promise = $http.get('/api/v1/movies/avengers');
promise.then(
function(payload) {
$scope.movieContent = payload.data;
});
在这个例子中，我们忽略error函数，以及promise的错误，update回调函数。初学者可能会疑惑，为什么我们要这么费力的获取一个答案。但每个人在开始写angluar中non-trivial服务时都会碰壁—–如何传递一个回调函数到一个调用函数，当服务返回早于回调调用前？
Promises and Services
Angular的语法要求我们用promise作为一个callback handle,在service中进行异步操作，返回一个promise， 当异步工作完成时，然后promise的函数被调用。有了一个思路后，我们建立一个简单的controller和service例子来获取数据，并在页面中显示数据。
angular.module('atTheMoviesApp',[])
.controller('GetMoviesCtrl',function($log,$scope,movieService) {
$scope.getMovieListing = function(movie) {
var promise =
movieService.getMovie('avengers');
promise.then(
function(payload) {
$scope.listingData = payload.data;
},function(errorPayload) {
$log.error('failure loading movie',errorPayload);
});
};
})
.factory('movieService',function($http) {
return {
getMovie: function(id) {
return $http.get('/api/v1/movies/' + id);
}
}
});
现在你可能学会调用 异步调用$http方法，获取一个result，并更新用户界面。 服务不会理解UI的含义，你也不能将$scope传递到getMovie函数中,这样看似很好，然而。。
那怎么进行post操作呢
下载端绑定一个$http.get promise,并将其传递给controller，controller会自己处理这个结果。 如果你想要服务 进行 post-process？ 更重要的是，如果你想处理 $http 的error，在服务层，而controller不需要直接处理 404s 等
在更复杂的情况，你可能解决这个问题，通过建立自己的promise，重构service来使用promise，这样就可以在service中处理和拿回我们想要的负载。
...
.factory('movieService',function($http,$log,$q) {
return {
getMovie: function(movie) {
var deferred = $q.defer();
$http.get('/api/v1/movies/' + movie)
.success(function(data) {
deferred.resolve({
title: data.title,cost: data.price});
}).error(function(msg,code) {
deferred.reject(msg);
$log.error(msg,code);
});
return deferred.promise;
}
}
});
更有前途的理由是，我们构建一个内嵌的promise结构，可以控制调用的input和output，合适的log error，转换output，并且提供一个状态来更新 deferred.notify(msg)。
But there is a better,more foolproof way…
但是有一个更好的方法，更简单
Composing Promises 组合promises
我们可以避免创建自己的deferred对象，通过结合一个then转换自己的response，返回一个转换的结果到调用着，来管理分散的promise。例如，我们想包含$http所响应的数据，而不用处理自己的deferred对象:
this.getMovie = function(movie) {
return $http.get('/api/v1/movies/' + movie)
.then(
function (response) {
return {
title: response.data.title,cost: response.data.price
});
});
};
现在这个内容返回到服务方法的then中，将形成一个链promise，它来转换输出。而controller可以做没http的工作
$scope.getMovie = function(movie) {
service.getMovie(movie)
.then(function(movieData) {
$scope.movieData = movieData;
});
};
我减少这个代码量，来实现一相同的结果，我们不需要担心在Ajax中将会发生失败的事情。
Handling problems in nested service calls
在service calls 中处理问题
现在我们用一个内嵌的返回 success 函数， promise代码将自动检测error函数的缺失，并终止调用默认的$http的error对象。 但是，你可能会担心如何转换error呢？
this.getMovie = function(movie) {
return $http.get('/api/v1/movies/' + movie)
.then(
function (response) {
return {
title: response.data.title,cost: response.data.price
});
},function (httpError) {
// translate the error
throw httpError.status + " : " +
httpError.data;
});
};
现在error返回一个单string，不是$http 的error,data、status、 header和config属性。
Doing more than one thing at a time 一次做更多
这是一个强大的service,当需要同时处理多个异步活动时。 $q功能让我们同时调用多个回调函数，利用单一函数来连接他们。
service('asyncService',$q) {
return {
loadDataFromUrls: function(urls) {
var deferred = $q.defer();
var urlCalls = [];
angular.forEach(urls,function(url) {
urlCalls.push($http.get(url.url));
});
// they may,in fact,all be done,but this
// executes the callbacks in then,once they are
// completely finished.
$q.all(urlCalls)
.then(
function(results) {
deferred.resolve(
JSON.stringify(results))
},function(errors) {
deferred.reject(errors);
},function(updates) {
deferred.update(updates);
});
return deferred.promise;
}
};
});
这个例子中的负载包含一组对象，Url 如下：
[
{ url: 'ajax1.html' },{ url: 'ajax2.html' },{ url: 'ajax3.html' }
]
对于每个URL，一个promise 由执行$http.get创建，promise添加到一个数组中，在$q.all 的函数获取一个数组promise,一个转换结果到一个promise 包含一个对象:
[ promise1_result_payload,promise2_result_payload,promise3_result_payload ]
from：http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/
原文链接：https://www.f2er.com/angularjs/149403.html