Javascript AngularJS:如何缓存从$http调用返回的json数据?

Javascript AngularJS:如何缓存从$http调用返回的json数据?,javascript,asp.net,json,angularjs,caching,Javascript,Asp.net,Json,Angularjs,Caching,如何缓存从$http调用返回的json数据。我使用以下样式的$http调用: $http({ url: 'SomeWebMethodUrl', method: "POST", data: "{'query':'somevalue'}", headers: { 'Content-Type': 'application/json' } }).success(function (data, status, headers, con

如何缓存从$http调用返回的json数据。我使用以下样式的$http调用:

$http({
        url: 'SomeWebMethodUrl',
        method: "POST",
        data: "{'query':'somevalue'}",
        headers: { 'Content-Type': 'application/json' }
    }).success(function (data, status, headers, config) {
        //something in success
    }).error(function (data, status, headers, config) {
        //something in error
    });
我看了以下教程:关于缓存来自$http调用的服务器响应。但它解释了$http.get()样式,并将缓存数据,如果绝对URL相同,则不会发出第二个$http请求


如果将来相同的webmethod调用的“data”属性相同,我是否可以将缓存与$http调用的样式一起使用?我正在为我的WebMethods使用ASP.net ASMX webservice。

angular.js缓存仅设计用于HTTP GET调用。这与HTTP协议的意图是一致的,因为HTTP服务器通常不会查看URL、HTTP方法和缓存控制头以外的内容来确定它们是否可以使用缓存内容响应请求。因此,angular的作者没有将缓存功能扩展到其他HTTP方法

从另一个角度来看,angular$cache服务实际上只是一个简单的键值存储,请求的URL作为键,HTTP GET请求的响应是存储在本地而不是服务器上的值

当您以这种方式思考时,就会清楚为什么缓存对POST请求的响应更困难。POST请求返回的内容不仅取决于URL,还取决于发布的内容。要将结果缓存到键值存储中,您需要一种机制来创建标识URL和所传递数据的唯一键

如果您的数据足够简单,我的建议是编写自己的缓存,并在使用angular$http服务之前进行检查。在不了解更多数据方法的情况下,我无法给出完整的示例,但您可以这样做:

angular.module('myModule').service('myDataService', function($cacheFactory, $http) {

  var cache = $cacheFactory('dataCache');

  function success(data, status, headers, config) {
    // some success thing
  }

  function error(data, stats, headers, config) {
    // some error thing
  }

  this.getSomeData = function(url, query) {
    var cacheId = url + '*' + query;
    var cachedData = cache.get(cacheId);
    // Return the data if we already have it
    if (cachedData) {
      success(cachedData);
      return;
    }

    // Got get it since it's not in the cache
    $http({url: url,
           method: 'POST',
           data: {query: query},
           headers: { 'Content-Type': 'application/json' }  // Probably not necessary, $http I think does this 
         }).success(function(data, status, headers, config) {
              // Put this in our cache using our 'unique' id for future use
              cache.put(cacheId, data);
              success(data, status, headers, configs);
         }).error(error);    

  };

});
然后,您将在当前使用原始$http服务的位置替换此包装器服务


关键是要实现自己的缓存,在实际调用$http服务之前将“url+数据”理解为密钥。

使用POST请求在数据存储中添加新记录、放置和删除修改数据存储的状态。而且兑现任何一个都没有意义


仅获取检索数据而不修改数据存储。这对兑现它的响应是有意义的。

重复?谢谢@allenhwkim,我用cache:true参数尝试了这个方法,但是每次调用$http调用都会发生(而且我不会刷新浏览器并在点击某个按钮时一次又一次地调用它)。将$http拦截器放在$http拦截器中会很酷,这样您就可以使用$http still
$httpProvider.interceptors.push(function(){return{'request':函数(config){/*Cache Magic*/});
很好地解释了为什么角度缓存得到v.POST