在AngularJS中使用$q服务
今天在写AngularJS Service,然后希望在Controller中使用Service提供Model。架构上,我希望Controller可以直接获得数据,因此有了“同步读取”数据的想法。但是,我们都知道,在前端做同步读取显然不是好的实践做法,毕竟JavaScript的很多良好体验都是通过异步请求实现的。而且,同步之后会严重影响前端的体验和性能。所以,这里把标题写成“同步读取服务器数据”,更多是吸引眼球。希望刚刚你不是拿着砖头正准备拍的! :)
不过,我在网上搜索了一下,还真有人一开始和我想法一样的,见参考资料2。转入正题。
AngularJS提供了一个内置Service $q,它提供了一种承诺/延后(promise/deferred),可以保证我们的调用代码一定能够拿到数据。当然,我们可以猜到,最后去服务器取数据的方式肯定是异步的。只不过这个服务提供了表面上是同步访问的API,当数据获取成功之后,自动将数据提供给调用的代码。
话不多说,上代码看看:
1. 创建一个Service,去服务器读取数据:
// $q 是内置服务,所以可以直接使用
ngApp.factory('UserInfo', ['$http', '$q', function ($http, $q) {
return {
query : function() {
var deferred = $q.defer(); // 声明延后执行,表示要去监控后面的执行
$http({method: 'GET', url: 'scripts/mine.json'}).
success(function(data, status, headers, config) {
deferred.resolve(data);// 声明执行成功,即http请求数据成功,可以返回数据了
}).
error(function(data, status, headers, config) {
deferred.reject(data); // 声明执行失败,即服务器返回错误
});
return deferred.promise; // 返回承诺,这里并不是最终数据,而是访问最终数据的API
} // end query
};
}]);
2. 在Controller上(以同步方式)使用这个Service:
angular.module('ngApp')
.controller('MainCtrl', ['$scope', 'UserInfo', function ($scope, UserInfo) { // 引用我们定义的UserInfo服务
var promise = UserInfo.query(); // 同步调用,获得承诺接口
promise.then(function(data) {// 调用承诺API获取数据 .resolve
$scope.user = data;
}, function(data) {// 处理错误 .reject
$scope.user = {error: '用户不存在!'};
});
}]);
支持管理员!
再请教下管理员,在controller中像这样获取数据,这里的$scope.user是需要提前声明好吗?
promise.then(function(data) {// 调用承诺API获取数据 .resolve
$scope.user = data;
}, function(data) {// 处理错误 .reject
$scope.user = {error: '用户不存在!'};
});
如果我请求的数据是一组json对象的数组,供html页面循环使用(ng-repeat),我需要在promise.then(function(data) {}里面这样写吗?
$scope.goods = [];
promise.then(function(data) {// 调用承诺API获取数据 .resolve
for(var i=0;i<data.length;i++){
$scope.goods.push(data);
}
}
然后我在这里console.log($scope.goods);
在chrome浏览器的控制台中只显示[],而且我的循环也没有取到数据,求管理员指点!! 麻烦管留言指点下,我还没有解决这个问题。只有在循环里console.log可以打印出值,但是在外面就是空数组了 已解决。
页:
[1]