4

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

当输入任一选项卡时，我需要点击一个 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'));
  }

这很好用，但感觉……很脏。有没有更好的方法来实现同样的目标？

4

1 回答 1

3

我自己一直在处理资源缓存。到目前为止，这是我的做法。

我从一个 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 服务和我的项目资源（例如），然后可以执行以下操作：

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

我喜欢这让我的控制器保持清洁。

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

更新：

正如下面评论中提到的，有一个更简单的资源缓存值得一看。我最初是从这个示例开始的，然后将其构建到我现在使用的上面。

angularjs：如何向资源对象添加缓存？

于 2013-04-02T03:41:24.523 回答