0

我目前正在尝试在我的 Angular 应用程序中实现缓存服务，以减少端点的工作量并（希望）在我的界面上看到一些轻微的、可能可以忽略不计的加载时间。

我已经开始实现我自己的cacheService，这几乎是一个包装器$cacheFactory

(function () {
    'use strict';

    angular
        .module('app')
        .factory('cacheService', cacheService);

    cacheService.$inject = ['$cacheFactory']

    function cacheService($cache) {
        return $cache('appCache');
    }
})();

然后我有datacontext它本质上是一个消耗我cacheService和的工作单元$http（我在那里有几个其他“存储库”，但只显示了我试图让它使用的那个）

(function () {
    'use strict';

    angular
        .module('app')
        .factory('datacontext', datacontext);

    datacontext.$inject = ['$http', 'cacheService', '$q'];

    function datacontext($http, cache, $q) {    
        var rulesRepo = (function () {
            var repo = {
                get: getRule,
                getAll: getAll
            };

            return repo;

            function getRule(ruleId) {
                // placeholder
            }

            function getAll() {
                var deferred = $q.defer();

                // check to see if we have data cached
                var rules = cache.get('rules');
                if (rules) { // if it's cached, return it
                    deferred.resolve(rules);
                } else { // otherwise get the data from the API, cache it and return it
                    $http.get('/api/rules')
                        .then(function (response) {
                            cache.put('rules', response.data);
                            deferred.resolve(response.data);                            
                        });
                }
                return deferred.promise;
            }
        })();    

        var service = {
            rules: rulesRepo
        };

        return service;
    }
})();

然后我的角度控制器消耗datacontext

(function () {
    'use strict';

    angular
        .module('app')
        .controller('HomeController', HomeController);

    HomeController.$inject = ['$scope', 'datacontext'];

    function HomeController($scope, context) {    
        context.rules.getAll()
            .then(
                function (data) { // success
                    $scope.rules = data;
                },
                function (response) { // failure
                    console.log(response);
                });

        activate();
        function activate() { }
    }
})();

我现在面临的问题是，每当我调用 时context.rules.getAll()，它总是命中else语句，意思rules是未定义的，所以它从不使用缓存，它只是再次调用我的 API，获取数据，缓存它（该部分有效，我已经通过在将其放入缓存后直接从缓存中提取来测试它），然后返回承诺。一遍又一遍。

有人能指出我不明白这应该如何工作吗？

4

1 回答 1

0

鉴于 Angular 中的所有工厂都是单例的，基本的缓存工厂实现将是这样的

app.factory(cacheFactory, function(){
  var localCache = {};
  var put  = function(key, value)     { localCache[key] = value;    }
  var get  = function(key)     { return localCache[key];    }
  return { get:get, put:put  } 
})

这应该可以工作，除非您即使在硬刷新时也想保持缓存。

于 2014-11-04T16:28:13.340 回答