web-dev-qa-db-ja.com

AngularJSで$ resourceキャッシュを更新/無効化する方法

次のようなデフォルトの$ httpキャッシュ実装を使用する単純なUser $ resourceがあります。

factory('User', function($resource){
    return $resource(endpoint + '/user/current/:projectId', {},
        {get: 
            {
                cache: true,
                method: 'GET'
            }
        }
    );
})

これは非常にうまく機能します。つまり、サーバーがアプリケーションで1回だけ呼び出され、値がキャッシュから取得されます。

しかし、特定の操作の後にサーバーから値を更新する必要があります。それを行う簡単な方法はありますか？

ありがとう。

angularjsangularjs-resource
94
Alexandre Bulté

ブール値を保持し、$httpキャッシュを取得します。

var $httpDefaultCache = $cacheFactory.get('$http');

次に、$cacheFactoryで作成された別のキャッシュと同様に、以下に示す使用インスタンスを制御できます。

$httpDefaultCache.remove(key);
// Where key is the relative URL of your resource (eg: /api/user/current/51a9020d91799f1e9b8db12f)
115
Anthonny

各cacheのactionプロパティでブール引数を使用する代わりに、 $ cacheFactory で作成されたキャッシュインスタンスを渡すことができます。キャッシュ）。

使用例：

app.factory('Todos', function($resource, $cacheFactory) {
    var cache = $cacheFactory('todo');
    return $resource(apiBaseUrl + '/todos/:id', { id: '@id' }, {
        'get': { method: 'GET', cache: cache  },
        'query': { method: 'GET', cache: cache, isArray: true }
    });
});
17
Variant

このスレッドに似たものを探していましたが、$ resourceがキャッシュを自動的に管理するため、キャッシュを強制的にクリアする必要はありませんでした。

クエリ可能なリソースがある場合、そのクエリ応答はキャッシュされますが、同じリソース用に何かを保存する場合、以前にキャッシュされたデータは無効である必要があるため、データは消去されます。このように機能することは理にかなっています。

これを行うために使用するコードをいくつか示します（奇妙に見えるファクトリ作成部分を無視して、「クラス」本体に注意を払うことができます）。

'use strict';

sampleApp.players.$ng.factory('sampleApp.players.PlayerService', [
    '$log',
    '$resource',
    sampleApp.players.PlayerService = function ($log, $resource) {
        var service = {};

        $log.info('Creating player resource.');
        var Player = $resource('/api/players', {}, {query: {
            isArray: true,
            cache: true,
            method: 'GET'
        }});

        service.addPlayer = function(playerName) {
            $log.info('Saving a new player.');
            return new Player({name: playerName}).$save();
        };

        service.listPlayers = function () {
            $log.info('Fetching players.');
            return Player.query();
        };

        return service;
    }]);

ListPlayers関数を数回呼び出すと、最初の呼び出しでhttp get要求が行われ、以降の呼び出しはすべてキャッシュされます。ただし、addPlayerを呼び出すと、http投稿が期待どおりに実行され、その後listPlayersの次の呼び出しでhttp get（キャッシュされない）が実行されます。

これにより、他の誰かの（$ http）キャッシュを管理し、どのURLがリクエストに使用されており、どのURLが適切なタイミングでキャッシュをクリアしているのかを把握するというビジネスを回避できます。

ここでの話の教訓は、ライブラリを操作することであり、バグや不完全な機能を除いてすべてうまくいくと思いますが、Angularにはそれらがありません;）

追伸これはすべてAngularJS 1.2.0で実行されています。

6
user605331