缓存角度资源对象

Question

我想缓存从 service.js 返回的资源对象，以便一次又一次地不命中 API 并且响应时间快。我该如何使用它？尝试了几个样本，但无法成功。

我的控制器.js

app.controller('MyCtrl2', ['$scope', '$rootScope', '$location', 'UserFactory', 'ProductFactory', '$q', 'Reddit', function ($scope, $rootScope, $location, UserFactory, ProductFactory, $q, Reddit) {

  $scope.casualShirts = function () {
    console.log("casualshirts");
    $rootScope.home = ProductFactory.home.query({productcategory: 'Men Casual Shirts'});

    var pagesShown = 1;
    var pageSize = 21;

    $scope.paginationLimit = function(data) {
        //alert("34");
        return pageSize * pagesShown;
    };
    $scope.hasMoreItemsToShow = function() {
        return pagesShown < ($rootScope.home.length / pageSize);
    };
    $scope.showMoreItems = function() {
        pagesShown = pagesShown + 1;
    };
    $location.path('/view2');
}

}]);

我的服务.js

services.factory('ProductFactory', ['$resource', '$rootScope', '$cacheFactory', function ($resource, $rootScope, $cacheFactory) {
/*alert("I am here service");*/
console.log("casualshirts service");
return  {


    home: $resource('/rest/products/:productcategory', {}, {
        query: {method: 'GET', isArray: true,cache: $cacheFactory, },
        create: {method: 'POST'}
    })
}]);

另外，如何设置过期时间，缓存会在一段时间后刷新。

jsfiddle 会很有帮助。感谢这里所有的聪明人。

Answer 1

我认为您的 $resource 声明有点偏离，因为 cache 属性应该是布尔值或 $cacheFactory 创建的缓存对象，而不是 $cacheFactory 服务本身。来自文档：

cache – {boolean|Cache} – 如果为 true，则默认使用 $http 缓存来缓存 GET 请求，否则如果使用 $cacheFactory 构建的缓存实例，则此缓存将用于缓存。

因此，如果您只是将其设置为 true，则应该使用默认值进行缓存

 home: $resource('/rest/products/:productcategory', {}, {
    query: {method: 'GET', isArray: true, cache: true },
    create: {method: 'POST'}
})

如果您决定使用自己的缓存对象而不是默认的 $http 缓存，您可以像这样创建它：

var myCache = $cacheFactory('myCache');

然后，您可以随时使用myCache.removeAll() 方法清除它。见https://docs.angularjs.org/api/ng/service/$cacheFactory

演示

这是一个 sn-p，它演示了使用由 $cacheFactory 创建的自定义缓存 (myCache)，并演示了缓存确实按预期工作。

它大致基于您的代码，但我必须对其进行修改以展示我想要展示的内容。

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

app.controller('myCtrl', function($scope, $resource, $cacheFactory, ProductFactory) {
	$scope.products = [];
	var myCache = $cacheFactory.get('myCache');
  
 	$scope.getProducts = function() {
    	ProductFactory.home.query({id: $scope.id})
  						   .$promise.then(function(product) {
                           		$scope.products = product;
                      			$scope.cache = myCache.info();
                      		});
    };
  
    $scope.clearCache = function() {
        myCache.removeAll();
        $scope.cache = myCache.info();
    };
  
  
});


app.factory('ProductFactory', function ($resource, $rootScope, $cacheFactory) {

  var myCache = $cacheFactory('myCache');
  
	return  {
    	home: $resource(
          	'http://jsonplaceholder.typicode.com/photos/', {}, 
          		{
        			query: {method: 'GET', isArray: true,cache: myCache },
        			create: {method: 'POST'}
				}
        	)
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.js"></script>

<div ng-app="app" ng-controller="myCtrl">
  
  <p><strong>Hint:</strong> open devtools and look at the network tab as you run this demo.
    You'll see that the request for a specific ID only occurrs once as long as the
    cache is not cleared.</p>
  
  Enter a product ID (1 - 5000): <input ng-model="id">
  <button ng-click="getProducts()">Get Products</button>
  
  <h3>Products:</h3>
  <pre>{{ products }}</pre>
  
  <h3>myCache:</h3>
  <pre>{{ cache }}</h3>
  
  <button ng-click="clearCache()">Clear myCache</button>
  
  
</div>

Answer 2

尝试使用 Restangular。它是在 Angular 中处理 REST 的替代解决方案，它还解决了缓存资源对象的问题。

示例：

var accountsResource = Restangular.all('accounts')
accountsResource.one('info',42).get();
accountsResource.one('info').getList();