Question

我正在尝试使用angularjs缓存响应，但它没有发生。

代码＃1

var app = angular.module("jsonService", ["ngResource"]);

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

    var url = "myurl?domain=:tabUrl";

    var data = cache.get(url);

    if (data==undefined) {
    var retObj = $resource(url, {}, {
        list: {
            method: "GET",
            cache: true
        }
    });
    data = retObj;
    cache.put(url, data);
    };
    return cache.get(url);
});

代码＃2

var app = angular.module("jsonService", ["ngResource"]);

app.factory("JsonFactory", function($resource) {

    var url = "myurl?domain=:tabUrl";
    console.log(url);

    var retObj = $resource(url, {}, {
        list: {
            method: "GET",
            cache: true
        }
    });
    return retObj;
});

在我编写的代码之后

。在查看开发工具时，总会在网络选项卡中发出XHR请求。

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

Answer 1

在阅读了一些回复之后，我认为您所问的是，为什么网络标签在使用角度缓存时会显示服务器的200响应。

有两个缓存。第一个缓存是angular的缓存。如果您在网络选项卡中看到xhr请求，则表示angular已确定其缓存中不存在该URL，并已向浏览器请求该资源的副本。此外，浏览器已经查看了它自己的缓存，并确定其缓存中的文件不存在，或者太旧了。

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

在网络标签中看到请求后，angular根本没有服务器响应中的说法。如果您正在寻找来自服务器的304响应，并且服务器未提供响应，那么服务器和浏览器通信中存在问题，而不是客户端javascript框架。

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

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

此外，如果您使用浏览器中的刷新按钮，浏览器将向保证失败的服务器发送信息（max-age = 0），因此您将始终在页面刷新时获得200响应。 / p>

Answer 2

根据您使用的角度版本的文档，ngResource尚不支持缓存。

http://code.angularjs.org/1.0.8/docs/api/ngResource。$资源

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

我不完全确定语法，但是这样：

yourModule.run(function($http)
{
    $http.cache=true;
});

Answer 3

$ 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：

<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>

截图：

enter image description here

[编辑]用于html5 localStorage解决方案

<强> JSBin Demo

.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;
    }  
  };
});

希望这对你有所帮助。

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

3 个答案:

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

3 个答案:

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