在AngularJS中缓存HTTP“获取”服务响应？

Question

在AngularJS中缓存HTTP“获取”服务响应？我希望能够创建一个自定义AngularJS服务，该服务在其数据对象为空时发出HTTP“Get”请求，并在成功时填充数据对象。下次调用此服务时，我想绕过再次发出HTTP请求的开销，而是返回缓存的数据对象。这可能吗？

Answer 1

Angular的$ http 内置了一个缓存。根据文件：

cache - {boolean | Object} - 使用$ cacheFactory创建的布尔值或对象，用于启用或禁用HTTP响应的缓存。有关更多信息，请参阅 $ http Caching。

布尔值

所以你可以在其选项中设置cache为true：

$http.get(url, { cache: true}).success(...);

或者，如果您更喜欢配置类型的呼叫：

$http({ cache: true, url: url, method: 'GET'}).success(...);

缓存对象

您还可以使用缓存工厂：

var cache = $cacheFactory('myCache');$http.get(url, { cache: cache })

你可以使用$ cacheFactory自己实现它（特别是在使用$ resource时）：

var cache = $cacheFactory('myCache');var data = cache.get(someKey);if (!data) {
   $http.get(url).success(function(result) {
      data = result;
      cache.put(someKey, data);
   });}

Answer 2

我认为现在有一个更简单的方法。这为所有$ http请求启用了基本缓存（$ resource继承）：

 var app = angular.module('myApp',[])
      .config(['$httpProvider', function ($httpProvider) {
            // enable http caching
           $httpProvider.defaults.cache = true;
      }])

Answer 3

在当前稳定版本（1.0.6）中执行此操作的更简单方法需要更少的代码。

设置模块后添加工厂：

var app = angular.module('myApp', []);

// Configure routes and controllers and views associated with them.

app.config(function ($routeProvider) {

    // route setups

});

app.factory('MyCache', function ($cacheFactory) {

    return $cacheFactory('myCache');

});

现在你可以将它传递给你的控制器：

app.controller('MyController', function ($scope, $http, MyCache) {

    $http.get('fileInThisCase.json', { cache: MyCache }).success(function (data) {

        // stuff with results

    });

});

一个缺点是密钥名称也会自动设置，这可能会使清除它们变得棘手。希望他们能以某种方式添加关键名称。