我在角度服务中遇到了promise问题。我有一个方法为getArea
的服务,它应该返回服务区域的名称。服务从API获取服务区域。当getArea
获取服务区域时,它会找到请求区域的名称,并应该返回它。然而,我的代码不起作用——我进入了一个无限循环。我想我误解了如何使用承诺?
供应商服务:
var servicePromise;
var getServices = function(){
if( !servicePromise ){
servicePromise = $http.get('/api/services')
.then(function(res){
return res.data.data;
});
}
return servicePromise;
};
var myService = {
getServices : getServices,
getArea : function(questionnaireId){
getServices().then(function(services){
// ...
return "hello world";
});
}
};
return myService;
控制器:
$scope.supplierService = SupplierService;
视图:
<div>
<b>Area:</b> {{ supplierService.getArea(r.questionnaireId) }}
</div
我希望视图显示"区域:你好世界",但进入了一个无限循环。
更新1:我在服务中添加了getServices
作为公共功能,可以从控制器访问它,如下所示:
SupplierService.getServices().then(function(d){
$scope.services = d;
});
所以我想问题出在getArea
方法上?
更新2:我受到了这个答案的启发https://stackoverflow.com/a/12513509/685352.我想缓存结果。
更新3:这里有一个plunker。如果您尝试从视图访问supplierService.getArea(100)
,浏览器将不会响应。
您的服务应该更像这样:
var getServices = function(){
var deferred = $q.deferred();
$http.get('/api/services')
.then(function(res){
deferred.resolve(res.data)
});
return deferred.promise;
};
注意,当您创建一个deferred时,您必须返回deferred.promise(实际的promise),然后当您是异步调用返回时,必须根据需要调用deferred.resolve或deferred_rejected(分别触发成功或错误函数)
小补充一点,我有一个plunkr展示了一些将数据从服务获取到控制器中的方法,因为这是进入Angular 的开发人员的常见问题
http://plnkr.co/edit/ABQsAxz1bNi34ehmPRsF?p=info
这并不是绝对的最佳实践,因为我试图让它尽可能简单,但基本上展示了三种不同的"共享"数据的方法。请记住,其中一些方法依赖于angular.copy,这意味着存储数据的服务的属性必须是Object或Array(基元类型不起作用,因为引用无法共享)。
这是一个包含内联函数的重写:
var myService = {
var dataLoaded = false;
var data = {}; //or = [];
getServices : function(){
var deferred = $q.defer();
if( !dataLoaded ){
$http.get('/api/services').then(function(res){
angular.copy(res.data, myService.data);
deferred.resolve(myService.data);
}, function(err){
deferred.reject("Something bad happened in the request");
});
}
else
{
deferred.resolve(myService.data);
}
return deferred.promise;
}
};
return myService;
为了解释,我使用$q服务创建了一个新的promise,您需要将其注入到服务函数中。这使我可以用我已经拥有的数据来解析该promise,或者调用服务并解析该数据,但在这两种情况下,当使用它时,都假设您只会得到一个promise,因此正在处理异步操作。如果要加载多个数据集,则可以使用一个对象来存储标志,而不是使用单个布尔值。
我认为如果您返回$http回调?
//$http.get('/someUrl').success(successCallback);
var getServices = function(){
return $http.get('/api/services');
};
getServices.success(function(services){
// ...
return "hello world";
});
}