Wie speichert man einen http get Service in angularjs?

Ich möchte in der Lage sein, einen benutzerdefinierten Service zu erstellen, der eine HTTP-Get-Anforderung in dem Fall abruft, in dem das Datenobjekt leer ist, und das Datenobjekt bei Erfolg aufzufüllen. Beim nächsten Aufruf eines Serviceanrufs ruft das Gerät nicht das http get auf und zeigt stattdessen das Datenobjekt an.

Irgendwelche Ideen, wie es geht?

   

Angulars $ http hat einen eingebauten Cache . Laut den Dokumenten:

cache – {boolean | Object} – Ein boolescher Wert oder ein mit $ cacheFactory erstelltes Objekt zum Aktivieren oder Deaktivieren des Caching der HTTP-Antwort. Weitere Informationen finden Sie unter $ http Caching .

Boolescher Wert

Sie können also den cache in seinen Optionen auf true setzen :

 $http.get(url, { cache: true}).success(...); 

oder, wenn Sie den Config-Typ des Anrufs bevorzugen:

 $http({ cache: true, url: url, method: 'GET'}).success(...); 

Cache-Objekt

Sie können auch eine Cache-Factory verwenden:

 var cache = $cacheFactory('myCache'); $http.get(url, { cache: cache }) 

Sie können es selbst mit Hilfe von $ cacheFactory implementieren (insbesondere bei Verwendung von $ resource):

 var cache = $cacheFactory('myCache'); var data = cache.get(someKey); if (!data) { $http.get(url).success(function(result) { data = result; cache.put(someKey, data); }); } 

Ich denke, jetzt gibt es einen noch einfacheren Weg. Dies ermöglicht das grundlegende Caching für alle $ http Anfragen (welche $ Ressourcen erbt):

  var app = angular.module('myApp',[]) .config(['$httpProvider', function ($httpProvider) { // enable http caching $httpProvider.defaults.cache = true; }]) 

Eine einfachere Möglichkeit, dies in der aktuellen stabilen Version (1.0.6) zu tun, erfordert viel weniger Code.

Nachdem du dein Modul eingerichtet hast, füge eine Fabrik hinzu:

 var app = angular.module('myApp', []); // Configure routes and controllers and views associated with them. app.config(function ($routeProvider) { // route setups }); app.factory('MyCache', function ($cacheFactory) { return $cacheFactory('myCache'); }); 

Jetzt können Sie dies an Ihren Controller weitergeben:

 app.controller('MyController', function ($scope, $http, MyCache) { $http.get('fileInThisCase.json', { cache: MyCache }).success(function (data) { // stuff with results }); }); 

Ein Nachteil ist, dass die Schlüsselnamen auch automatisch eingerichtet werden, was das Löschen schwierig machen könnte. Hoffentlich werden sie in irgendeiner Weise hinzufügen, um Schlüsselnamen zu bekommen.

Überprüfen Sie den eckigen Cache der Bibliothek, wenn Sie das eingebaute Caching von $ http mögen, aber mehr Kontrolle wollen. Sie können damit nahtlos den $ http-Cache mit Time-to-Live, periodischen Löschvorgängen und der Option, den Cache für localStorage persistent zu machen, erweitern, sodass er über mehrere Sitzungen hinweg verfügbar ist.

FWIW, bietet es auch Werkzeuge und Muster, um Ihren Cache in einen dynamischeren Datenspeicher zu verwandeln, mit dem Sie als POJO’s interagieren können, anstatt nur die Standard-JSON-Strings. Ich kann den Nutzen dieser Option noch nicht kommentieren.

(Hinzu kommt, dass verwandte Bibliotheks -Eckdaten eine Art Ersatz für $ resource und / oder Restangular sind und vom eckigen Cache abhängig sind.)

Da es sich bei AngularJS-Factorys um Singletons handelt , können Sie einfach das Ergebnis der HTTP-Anfrage speichern und es beim nächsten Einlesen Ihres Dienstes wieder abrufen.

 angular.module('myApp', ['ngResource']).factory('myService', function($resource) { var cache = false; return { query: function() { if(!cache) { cache = $resource('http://example.com/api').query(); } return cache; } }; } ); 
 angularBlogServices.factory('BlogPost', ['$resource', function($resource) { return $resource("./Post/:id", {}, { get: {method: 'GET', cache: true, isArray: false}, save: {method: 'POST', cache: false, isArray: false}, update: {method: 'PUT', cache: false, isArray: false}, delete: {method: 'DELETE', cache: false, isArray: false} }); }]); 

setze den Cache auf true.