42

http 内にキャッシングを追加するのは非常に簡単です。( cache=true を渡すことにより)

http://docs.angularjs.org/api/ng.$httpには Cache オプションがあります。

angularjs の $resource に同様の機能を追加するにはどうすればよいですか?

4

8 に答える 8

56

AngularJs で独自のキャッシュを実装するのは非常に簡単です。$cacheFactoryを使用するだけです:

app.factory('myService', function($resource, $cacheFactory) {
   var cache = $cacheFactory('myService');
   var User = $resource('/user/:userId', {userId:'@id'});

   return {
      getResource: function(userId) {
         var user = cache.get(userId);
         if (!user) {
            user = User.get({userId:userId});
            cache.put(userId, user);   
         }
         return user;
      }
   };
});
于 2012-12-30T21:13:18.953 に答える
24

ドキュメントの状態として、$resourceには$cacheFactoryのサポートが組み込まれています。cache各アクションのプロパティを介して渡すことができます。

cache– {boolean|Cache}– の場合、リクエストをキャッシュするためにtrueデフォルトの$httpキャッシュが使用されます。GET$cacheFactory

使用例:

app.factory('Todos', function($resource, $cacheFactory) {
    var todosCache = $cacheFactory('Todos');
    return $resource(apiBaseUrl + '/todos/:id', {id: '@id'}, {
        'get': { method:'GET', cache: todosCache},
        'query': { method:'GET', cache: todosCache, isArray:true }
    });
});
于 2014-03-17T22:52:37.323 に答える
6

これはここでは言及されていないようですが、デフォルトのメソッドを上書きすることもできます。

app.factory("List", ["$resource", function($resource) {
    return $resource("./lists/:path/:action.json", {}, {
        get: {
            method: "GET",
            cache: true
        }
    });
}]);
于 2014-01-16T03:18:56.487 に答える
6

$http のデフォルト キャッシュを設定して、それに基づく $resource を設定することもできます。

LocalStorage を許可し、$cacheFactory に準拠する優れたangular-cacheを使用した私の設定:

app.run(function($http, DSCacheFactory) {

    DSCacheFactory('defaultCache', {
        deleteOnExpire: 'aggressive',
        storageMode: 'localStorage' 
    });

    $http.defaults.cache = DSCacheFactory.get('defaultCache');
});
于 2014-04-15T12:33:05.433 に答える
0

angular-resource ソースを見ると、現在書かれている方法ではキャッシュをトリガーできないことがわかります。

ソースからのリクエスト オブジェクトは次のとおりです。

$http({
    method: action.method,
    url: route.url(extend({}, extractParams(data), action.params || {}, params)),
    data: data
 }).then(...)

これに対処するには、いくつかの方法が考えられます。

まず、クライアント側の永続性を使用してローカルにキャッシュできます。ラッパーを使用してmplify.storeを使用します（b / c API構文があまり好きではありません）。探しているものと対象のブラウザーに応じて、他にもさまざまなストレージ ソリューションがあります。かなりの数の人々もローンチェアを使用しています。

次に、モデルを文字列化してローカルに保存し、必要なルールや時間制限に基づいてモデルを更新できます。

別の解決策は、Angular リソースを単純に変更して、探しているパラメーターを受け入れることです。これは、必要に応じて単純 (単に追加の引数を $resource に追加する) にすることも、複雑にすることもできます。

例えば

function ResourceFactory(url, paramDefaults, actions, cache) {
   ...
   var cache = cache != null ? cache : false; // Set default to false
   $http({
        method: action.method,
        url: route.url(extend({}, extractParams(data), action.params || {}, params)),
        data: data,
        cache: cache
    }).then(...)       
}

最後に、要件によっては、angular.factory を使用してサービスを作成し、独自のリソースを作成する方がはるかに簡単な場合があります。ngResource の利点の 1 つは、パラメーターを変換するときにすべての文字列補間が行われることです。ただし、必要に応じて解析用にこのロジックを掘り下げることも、使用しているモデルに基づいて独自のロジックを作成することもできます。

于 2012-11-09T08:05:46.660 に答える
0

angular-resource 1.5.5 を使用しており、コードを次のように設定しています。

概要

actionをqueryとして設定します。「query」アクションは配列としてデシリアライズされたレスポンスを想定しているため、isArray を明示的に true に設定する必要があります。私の理解では、デフォルトで ngResource アクションはクエリ以外のオブジェクトを期待しています。 こちらをご覧ください

コントローラ

angular.module("app")
    .controller('myCtrl',['$scope','myService',function($scope, myService) {
        $scope.myData= myService.myResource.query();
    }]);

サービス

angular.module('app')
    .factory('myService',['$resource',function($resource){
        var baseUrl = 'http://www.MyExample.com/';
        return{
            myResource:$resource(baseURL + '/myEndpoint/:id', {id:'@id'},{
                'query':{
                    method:'GET',
                    cache:'true',
                    isArray:true
                }}),
        }
    }]);
于 2016-05-19T20:06:48.533 に答える