javascript - 在 angularjs 服务中缓存数组

Question

我是 AngularJS 的新手，并且仍在尝试使用服务将数据拉入我的应用程序。

我正在寻找一种方法来缓存 $http.get() 的结果，这将是一个 JSON 数组。在这种情况下，它是一个静态事件列表:

[{ id: 1, name: "First Event"}, { id: 2, name: "Second Event"},...]

我尝试使用一项服务来缓存这些结果:

appServices.service("eventListService", function($http) {
    var eventListCache;

    this.get = function (ignoreCache) {

        if (ignoreCache || !eventListCache) {
            eventListCache = $http.get("/events.json", {cache: true});
        }

        return eventListCache;
    }


});

现在据我所知，我正在从 $http.get 函数返回一个“promise”，我在我的 Controller 中添加了一个成功回调:

appControllers.controller("EventListCtrl", ["$scope", "eventListService", 
    function ($scope, eventListService) {
        eventListService.get().success(function (data) { $scope.events = data; });
    } 
]);

这对我来说很好用。我想做的是向 eventListService 添加一个事件，以从 eventListCache 中提取特定的事件对象。

appServices.service("eventListService", function($http) {
    var eventListCache;

    this.get = function (ignoreCache) { ... }

    //added
    this.getEvent = function (id) {
         //TODO: add some sort of call to this.get() in order to make sure the 
         //eventListCache is there... stumped
    }        
});

我不知道这是否是处理缓存的最佳方式，或者这是否是一件愚蠢的事情，但我正在尝试从可能缓存也可能不缓存的数组中获取单个对象。或者，也许我应该调用原始事件并将对象从 Controller 中的结果数组中拉出。

Answer 1

您走在正确的轨道上。 Angularjs 中的服务是单例的，所以用它来缓存你的 $http 请求是可以的。如果你想在你的服务中公开几个功能，我会做这样的事情。我在 Angularjs 中使用 $q promise/deferred 服务实现来处理异步 http 请求。

appServices.service("eventListService", function($http, $q) {
    var eventListCache;

    var get = function (callback) {
        $http({method: "GET", url: "/events.json"}).
            success(function(data, status) {
                eventListCache = data;
                return callback(eventListCache);
            }).
        }
    }

    return {
        getEventList : function(callback) {
            if(eventListCache.length > 0) {
                 return callback(eventListCache);
            } else {
                var deferred = $q.defer();
                get(function(data) {
                    deferred.resolve(data);
                }
                deferred.promise.then(function(res) {
                    return callback(res);
                });
            }
        },
        getSpecificEvent: function(id, callback) {
            // Same as in getEventList(), but with a filter or sorting of the array
            // ...
            // return callback(....);
        }
    }
});

现在，在你的 Controller 中，你所要做的就是这个；

appControllers.controller("EventListCtrl", ["$scope", "eventListService", 
    function ($scope, eventListService) {

         // First time your controller runs, it will send http-request, second time it 
         // will use the cached variable
         eventListService.getEventList(function(eventlist) {
             $scope.myEventList = eventlist;
         });

         eventListService.getSpecificEvent($scope.someEventID, function(event) {
             // This one is cached, and fetched from local variable in service
             $scope.mySpecificEvent = event;
         });
    } 
 ]);