Question

我有一个多标签应用程序，有两个独立的控制器。

当输入任一标签时，我需要点击API。初始匹配后响应不会更新，因此在后续访问该选项卡时无需再次点击。

我的问题是缓存API响应的正确方法是什么，并将其设置为范围变量。

目前，我有一个像这样的帮助功能设置

var setAndCache = function(scope, cacheFactory, cacheKey, cacheValue) {
  scope[cacheKey] = cacheValue;
  cacheFactory.put(cacheKey, cacheValue);
};

像这样的缓存工厂设置

factory('TabData', function($cacheFactory) {
  return $cacheFactory('tabData');
}).

注入每个控制器

controller('TabOne', function($scope, $http, TabData) {

  var setupCache = function(response) {
    setAndCache($scope, TabData, 'tabOneData', response);
  };

  if (!TabData.get('tabOneData')) {
    $http.get('/path/to/api')
    .success(function(response) {
      setupCache(response);
    });
  }
  else {
    setupCache(TabData.get('tabOneData'));
  }

这很好，但感觉......很脏。是否有更好的方法来实现同样的目标？

Answer 1

我自己一直致力于资源缓存。到目前为止，我正是这样做的。

我从cacheManager服务开始：

app.factory('cacheManager', function($cacheFactory) {
    var cache = $cacheFactory('resource');

    return {

    /**
     * This will handle caching individual resource records
     * @param  CacheId string where we expect this to be stored in the cache
     * @param  Resource resource The resource object that we want to get
     * @param  Object param An object of params to pass to resource.get
     * @param  Function callback
     * @return resource object
     */
    fetchResource: function(cacheId, resource, params, callback) {
        var result = cache.get(cacheId);

        // See if we had a valid record from cache
        if(result) {
            console.log("cache hit: " + cacheId);
            callback(result);
            return result;
        } else {
            console.log("cache miss: " + cacheId);
            result = resource.get(params, function(response) {
                if(response.error) {
                    // We don't have a valid resource, just execute the callback
                    callback(response);
                    return false;
                }
                console.log("putting resource in cache");
                cache.put(cacheId, response);
                callback(response);
            });
            return result;
        }
    },
    <snip update/delete methods, etc>

然后在我的控制器中，我注入了cacheManager服务和我的Project资源（例如），然后可以执行：

$scope.data = cacheManager.fetchResource('project.' + $scope.id, Project, {id: $scope.id}, function(response) {
        ...
});

我喜欢保持控制器的清洁程度。

我知道在你的情况下你直接使用$ http而不是资源，但可以使用相同的方法。我个人建议尽可能多地将逻辑抽象到缓存包装器服务中，并最大限度地减少每个控制器的开销。

<强>更新

正如下面评论中所提到的，对资源的缓存有一个更为简单的看法，值得关注。我最初从这个例子开始，然后把它构建到我现在使用的上面。

angularjs: how to add caching to resource object?

缓存并设置angular.js中的范围值

1 个答案: