使用AngularJS在服務/工廠與控制器中解決承諾

Question

因此，我一直承諾要在服務與控制器中解決。 我希望在服務中解析它，這樣我就可以重復使用變量，而不必多次解析它。

我遇到的問題是它可以正常工作，但是返回數據的速度非常慢。 所以我覺得我在這里做錯了。 我的ng-option填充大約需要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;
    });
}]);

在控制器中解決：

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>

Answer 1

從角度來看，服務是單例，因此您的應用程序中只有一個實例。 這樣，您就可以一次解析數據（在您的服務中），將其存儲，然后在隨后的調用中僅返回已解析的數據。 這將使您不必多次解析數據，並使服務和控制器之間的邏輯分離。

更新 -改為緩存承諾，感謝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相關的代碼，我們可以檢查出來，看看是否有任何事情會使它變慢。