94 votes

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.

115voto

Anthonny Points 723

Conservez le booléen et obtenez le cache $http :

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

Ensuite, vous pouvez le contrôler comme n'importe quel autre cache créé avec $cacheFactory .

18voto

Variant Points 7827

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

Exemple d'utilisation:

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

6voto

user605331 Points 925

Je suis tombé sur ce thread à la recherche de quelque chose de similaire, mais a constaté que $ressource de gérer le cache automatiquement pour vous, il n'ya donc pas besoin de forcer le cache est effacé.

L'idée est que si vous disposez d'une ressource que vous pouvez faire une requête, que la réponse à la requête va être mis en cache, mais si vous enregistrez quelque chose pour que la même ressource, précédemment mis en cache les données doivent être invalide, il est nettoyé pour vous. Il est logique que cela fonctionnerait de cette façon.

Voici un code que j'utilise pour ce faire (vous pouvez ignorer la peut-être bizarre usine de création et de prêter attention à la "classe" du corps).

'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 listPlayers de fonction à plusieurs reprises, le premier appel fait une demande http get et tous les appels suivants sont mis en cache. Si vous appelez addPlayer cependant, un http post est effectuée comme prévu, et puis le prochain appel à listPlayers va effectuer un http get (pas de mise en cache).

Cela vous maintient de l'activité de gestion de quelqu'un d'autre ($http) cache et en essayant de garder en place avec l'url qui ont été utilisés pour les demandes et qui sont à la compensation des 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 pour les bugs ou incomplète de fonctionnalités, mais Angulaire de ne pas avoir l'un de ceux-ci ;)

p.s. Tout ceci est en cours d'exécution sur AngularJS 1.2.0.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X