因此,我一直在尝试获得在服务中与在 Controller 中解析的 promise 。我更愿意在服务中解决它,这样我就可以重用变量而不必多次解决它。
我遇到的问题是它可以工作,但它返回数据的速度非常非常慢。所以我觉得我在这里做错了什么。填充我的 ng-options 大约需要 5 或 6 秒。哪个更好?我怎样才能改进我的代码以使其运行得更快?
在服务中解决:
resortModule.factory('locaService',['$http', '$rootScope', function ($http, $rootScope){
locaService.getLocations=
function() {
return $http.get('/api/destinations').then(
function(result){
locaService.locations= result.data;
return locaService.locations;
}
);
return locaService.locations;
};
resortModule.controller('queryController',['$scope', 'locaService', function($scope, locaService) {
$scope.getLocations= locaService.getLocations().then(function(result){
$scope.locations= result;
});
}]);
在 Controller 中解析:
resortModule.factory('locaService',['$http', '$rootScope', function ($http, $rootScope){
locaService.getLocations=
function() {
locaService.locations= $http.get('/api/destinations');
//stores variable for later use
return locaService.locations;
};
}]);
resortModule.controller('queryController',['$scope', 'locaService',
function($scope, locaService) {
locaService.getLocations()
.then(
function(locations) // $http returned a successful result
{$scope.locations = locations;} //set locations to returned data
,function(err){console.log(err)});
}]);
HTML:
<select ng-click="selectCheck(); hideStyle={display:'none'}" name="destination" ng-style="validStyle" ng-change="getResorts(userLocation); redirect(userLocation)" class="g-input" id="location" ng-model="userLocation">
<option value=''>Select Location</option>
<option value='/destinations'>All</option>
<option value="{{loca.id}}" ng-repeat="loca in locations | orderBy: 'name'">{{loca.name}}</option>
</select>
最佳答案
在 Angular 中,服务是单例的,因此您的应用程序中只有一个实例。这允许您解析一次数据(在您的服务中)、存储它,然后在后续调用中只返回已解析的数据。这将使您不必多次解析您的数据,并使您的逻辑在服务和 Controller 之间保持分离。
更新 - 改为缓存 promise ,感谢 yvesmancera 发现错误
resortModule.factory('locaService', ['$http', '$rootScope', function ($http, $rootScope) {
var locationsPromise = null;
locaService.getLocations =
function() {
if (locationsPromise == null) {
locationsPromise = $http.get('/api/destinations').then(
function(result) {
return result.data;
}
);
}
return locationsPromise;
};
...
}
resortModule.controller('queryController',['$scope', 'locaService', function($scope, locaService) {
$scope.getLocations= locaService.getLocations().then(function(result) {
$scope.locations= result;
});
}]);
就加快数据加载速度而言,我认为您的 JavaScript 没有任何问题。这可能只是您的 api 调用占用了很多时间。如果您发布与 HTML 相关的代码,我们可以检查一下,看看是否有任何东西会减慢它的速度。
关于javascript - 使用 AngularJS 在服务/工厂与 Controller 中解决 promise ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31521545/