AngularJS:如何缓存从$ http调用返回的json数据? [英] AngularJS: How can I cache json data returned from $http call?

问题描述

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

How can I cache json data returned from $http call. I use the following style of $http call:

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

我看了下面的教程: https://coderwall.com/p/40axlq 关于缓存来自$ http调用的服务器响应.但这说明了$ http.get()样式，它将缓存数据，并且如果绝对URL相同，则不会发出第二个$ http请求.

I looked at the following tutorial: https://coderwall.com/p/40axlq on caching server response from $http call. But it is explaining $http.get() style and will cache data and will not make second $http request if the absolute URL is same.

将来我的'data'属性对于相同的webmethod调用相同时，可以使用$ http调用样式进行缓存吗?我正在为我的WebMethod使用ASP.net ASMX Web服务.

Can I use caching with my style of $http call when my 'data' property is same for same webmethod calls in future? I am using ASP.net ASMX webservice for my WebMethods.

推荐答案

angular.js缓存仅用于HTTP GET调用.这与HTTP协议的意图一致，因为HTTP服务器通常不会超出URL，HTTP方法和Cache-Control标头来确定它们是否可以响应具有缓存内容的请求.因此，angular的作者并未将缓存功能扩展到其他HTTP方法.

The angular.js cache is designed for HTTP GET calls only. This is consistent with the intent of the HTTP protocol, as HTTP servers don't usually look beyond the URL, the HTTP Method, and Cache-Control headers to determine whether they can respond to a request with cached content. Accordingly, the authors of angular did not extend the caching functionality to other HTTP methods.

另一种看待它的方式是，角度$ cache服务实际上只是一个简单的键值存储，其中请求的URL充当键，而对HTTP GET请求的响应则将其存储在本地在服务器上.

Another way to look at it is that the angular $cache service is really just a simple key value store, with the URL of the request acting as a key and the response to the HTTP GET request the value that is stored locally instead of on the server.

以这种方式思考时，很清楚为什么缓存对POST请求的响应更加困难. POST请求返回的内容不仅取决于URL，还取决于POSTed的内容.要将结果缓存到键值存储中，您需要一种机制来创建一个唯一的键，该键可同时标识URL和要传递的数据.

When you think of it that way it becomes clear why it's more difficult to cache the response to a POST request. The content returned by the POST request depends not only on the URL, but the POSTed content. To cache that result in a key value store you need a mechanism to create an unique key that identifies both the URL and the data being passed.

如果您的数据足够简单，我的建议是编写自己的缓存，该缓存在使用有角度的$ http服务之前应进行检查.在不了解您的数据方法的更多信息的情况下，我无法提供完整的示例，但是您可以执行以下操作:

If you data is simple enough, my suggestion is to write your own cache that is checked before you use the angular $http service. Without knowing more about your data method I can't give you a complete example, but you could do something like this:

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服务的地方替换此包装器服务.

You would then substitute this wrapper service where you currently use the raw $http service.

关键是要实现自己的缓存，该缓存在实际调用$ http服务之前将"url + data"理解为键.

The point is to implement your own cache that understands the 'url+data' as a key before actually calling the $http service.

这篇关于AngularJS:如何缓存从$ http调用返回的json数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！