angularjs – 在angular.js中缓存和设置范围值

发布时间：2020-12-17 17:12:37 所属栏目：安全来源：网络整理

导读：我有一个多标签应用程序,有两个独立的控制器. 输入任一选项卡后,我需要点击API.初始匹配后响应不会更新,因此在后续访问该选项卡时无需再次响应. 我的问题是缓存API响应的正确方法是什么,并将其设置为范围变量. 目前,我有一个像这样的帮助功能设置 var setAnd

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

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

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

解决方法

我自己一直在进行资源缓存.这是我到目前为止的方式.

我从一个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?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!