web-dev-qa-db-fra.com

Comment actualiser / invalider le cache de ressources $ dans AngularJS

J'ai une simple ressource User $ qui utilise l'implémentation de cache $ http par défaut comme ceci:

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

Cela fonctionne très bien, c’est-à-dire que mon serveur n’est appelé qu’une fois dans mon application, puis la valeur est extraite du cache.

Mais je dois actualiser la valeur du serveur après une certaine opération. Y a-t-il un moyen facile de faire ça?

Merci.

angularjsangularjs-resource
94
Alexandre Bulté

Gardez le booléen et récupérez le $http cache:

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

Ensuite, vous pouvez le contrôler comme n'importe quel autre cache créé avec $cacheFactory, une instance d’utilisation fournie ci-dessous:

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

Au lieu d'utiliser un argument booléen dans la propriété cache de chaque action, vous pouvez transmettre une instance de cache créée avec $ cacheFactory , sur laquelle vous pouvez mieux contrôler (c'est-à-dire effacer le cache).

Exemple d'utilisation:

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

Je suis tombé sur ce fil à la recherche de quelque chose de similaire, mais j'ai découvert que $ resource gérera automatiquement le cache pour vous. Il n'est donc pas nécessaire de forcer l'effacement du cache.

L'idée est que si vous avez une ressource que vous pouvez interroger, cette réponse sera mise en cache, mais si vous enregistrez quelque chose pour cette même ressource, les données précédemment mises en cache doivent être invalides, de sorte qu'elles sont effacées pour vous. Il est logique que cela fonctionne de cette façon.

Voici un code que j’utilise pour faire cela (vous pouvez ignorer la partie de création d’usine qui pourrait être étrange et faire attention au corps de "classe").

'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;
    }]);

Si vous appelez la fonction listPlayers plusieurs fois, le premier appel fait une demande d'accès http et tous les appels suivants sont mis en cache. Si vous appelez addPlayer cependant, une publication http est effectuée comme prévu, puis le prochain appel à listPlayers effectuera une extraction http (non mise en cache).

Vous évitez ainsi de gérer le cache de quelqu'un d'autre ($ http) et d'essayer de savoir quelles URL sont utilisées pour les demandes et pour effacer les caches au bon moment.

Je suppose que la morale de l'histoire ici est de travailler avec la bibliothèque et tout ira bien ... sauf les bugs ou les fonctionnalités incomplètes, mais Angular n'en a aucune;)

p.s. Tout cela tourne sous AngularJS 1.2.0.

6
user605331