Fatal编程技术网
  • angularjs/
  • angularjs不缓存资源数据。（即使在使用cacheFactory之后）

angularjs不缓存资源数据。（即使在使用cacheFactory之后）

angularjs caching

angularjs不缓存资源数据。（即使在使用cacheFactory之后）,angularjs,caching,Angularjs,Caching,我试图用angularjs缓存响应，但没有发生 代码#1 代码#2 在我写的两段代码之后。在查看开发工具时，网络选项卡中总会出现一个XHR请求 显然：日期不会改变。（这就是缓存的全部意义）根据您正在使用的angular版本的文档，ngResource还不支持缓存 .$资源 如果无法升级angular版本，则在使用$resource之前，您可能有幸手动配置http服务 我不太清楚语法，但大致如下： yourModule.run(function($http) { $http.cache=t

我试图用angularjs缓存响应，但没有发生

代码#1

代码#2

在我写的两段代码之后。在查看开发工具时，网络选项卡中总会出现一个XHR请求

显然：日期不会改变。（这就是缓存的全部意义）

根据您正在使用的angular版本的文档，ngResource还不支持缓存

.$资源

如果无法升级angular版本，则在使用$resource之前，您可能有幸手动配置http服务

我不太清楚语法，但大致如下：

yourModule.run(function($http)
{
    $http.cache=true;
});
$cacheFactory可以帮助您缓存响应。尝试通过以下方式实现“JsonFactory”：

app.factory("JsonFactory",function($resource,$cacheFactory){
    $cacheFactory("JsonFactory");
    var url="myurl?domain=:tabUrl";

    return{
      getResponse:function(tabUrl){
        var retObj=$resource(url,{},{list:{method:"GET",cache:true}});
        var response=cache.get(tabUrl);
        //if response is not cached
        if(!response){
          //send GET request to fetch response
          response=retObj.list({tabUrl:tabUrl});
          //add response to cache
          cache.put(tabUrl,response);
        }
        return cache.get(tabUrl);
      }  
    };
});
并在控制器中使用此服务：

app.controller("myCtrl",function($scope,$location,JsonFactory){
  $scope.clickCount=0;
  $scope.jsonpTest = function(){    
    $scope.result = JsonFactory.getResponse("myTab");
    $scope.clickCount++;
}
});
HTML:

希望这对您有所帮助。

在阅读了您的一些回复后，我想您要问的是，为什么在使用角度缓存时，网络选项卡显示来自服务器的200响应

有两个缓存。第一个缓存是angular的缓存。如果您在“网络”选项卡中看到一个xhr请求，那么这意味着angular已确定其缓存中不存在该url，并已向浏览器请求该资源的副本。此外，浏览器已在其自己的缓存中查找，并确定其缓存中的文件不存在或太旧

Angular的缓存不是脱机缓存。每次刷新浏览器页面时，angular的缓存机制都会重置为空

一旦在“网络”选项卡中看到请求，angular在服务器响应中就没有发言权。如果您正在寻找来自服务器的304响应，而服务器没有提供响应，那么问题存在于服务器和浏览器通信中，而不是客户端javascript框架中

304响应表示浏览器已在其缓存中找到旧文件，并希望服务器对其进行验证。浏览器提供了日期或etag，服务器验证了提供的信息仍然有效

200响应表示客户机没有提供任何信息供服务器验证，或者提供的信息验证失败

此外，如果您使用浏览器中的“刷新”按钮，浏览器将向服务器发送保证失败的信息（最大年龄=0），因此在页面刷新时，您将始终获得200响应。

您使用的是什么版本的angular？我将开始使用1.2.4并检查问题是否仍然存在。谷歌CDN:@rjm226使用1.2.4破坏了应用程序，AngularJS版本为1.2.4。我遇到了很多错误：[$interpole:interr]。我已经更新了使用html5 localStorage缓存响应并保持其过期的答案。希望这能有所帮助。ncaught错误：未知提供程序：$http来自“myapp”啊，是的，我的错。无法在配置块中执行此操作。它必须在运行块中设置为已编辑状态，或在控制器中设置。不起作用。。所有的资源仍然以200 OK重新加载。不是302。我目前所做的是将JSON响应存储在Chrome的本地存储器中。现在我正在搜索，如何修复localstorageError中enrty的过期日期以响应选项卡。getSelected:TypeError:Object#没有方法“list”list是我在angular资源模块中定义的自定义方法。您的资源对象似乎没有列表方法。 
app.factory("JsonFactory",function($resource,$cacheFactory){
    $cacheFactory("JsonFactory");
    var url="myurl?domain=:tabUrl";

    return{
      getResponse:function(tabUrl){
        var retObj=$resource(url,{},{list:{method:"GET",cache:true}});
        var response=cache.get(tabUrl);
        //if response is not cached
        if(!response){
          //send GET request to fetch response
          response=retObj.list({tabUrl:tabUrl});
          //add response to cache
          cache.put(tabUrl,response);
        }
        return cache.get(tabUrl);
      }  
    };
});

app.controller("myCtrl",function($scope,$location,JsonFactory){
  $scope.clickCount=0;
  $scope.jsonpTest = function(){    
    $scope.result = JsonFactory.getResponse("myTab");
    $scope.clickCount++;
}
});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.js"></script>
<script src="js/ngResource.js"></script>
<body ng-app="app">
<div ng-controller="myCtrl">
    <div>Clicked: {{clickCount}}</div>
    <div>Response: {{result}}</div>
    <input type="button" ng-click="jsonpTest()" value="JSONP"/>
</div>
</body>

.factory("JsonFactory",function($resource){
  var url="ur/URL/:tabUrl";
  var liveTime=60*1000;  //1 min
  var response = "";

  return{
    getResponse:function(tabUrl){
      var retObj=$resource(url,{},{list:{method:"GET",cache:true}});
      if(('localStorage' in window) && window.localStorage !== null){

      //no cached data
      if(!localStorage[tabUrl] || new Date().getTime()>localStorage[tabUrl+"_expires"])                  {
        console.log("no cache");
        //send GET request to fetch response
        response=retObj.list({tabUrl:tabUrl});

        //add response to cache
        localStorage[tabUrl] = response;
        localStorage[tabUrl+"_expires"] = new Date().getTime()+liveTime;
      }
      //console.log(localStorage.tabUrl.expires+"..."+new Date().getTime());
      return localStorage[tabUrl];
      }
      //client doesn't support local cache, send request to fetch response
      response=retObj.list({tabUrl:tabUrl});

      return response;
    }  
  };
});