it-swarm.com.de

HTTP-Antwort 'Get' in AngularJS zwischenspeichern?

Ich möchte in der Lage sein, einen benutzerdefinierten AngularJS-Dienst zu erstellen, der eine HTTP-Abrufanforderung sendet, wenn sein Datenobjekt leer ist, und das Datenobjekt bei Erfolg auffüllt.

Beim nächsten Aufruf dieses Dienstes möchte ich den Aufwand für die erneute Ausführung der HTTP-Anforderung umgehen und stattdessen das zwischengespeicherte Datenobjekt zurückgeben.

Ist das möglich?

210
Gavriguy

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

cache - {boolean | Object} - Ein boolescher Wert oder ein Objekt wurde erstellt Mit $ cacheFactory können Sie das Caching der HTTP-Antwort aktivieren oder deaktivieren. Siehe $ http Caching für weitere Informationen .

Boolescher Wert

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

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

oder, wenn Sie die Konfigurationsart 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 implementieren, indem Sie $ cacheFactory verwenden (besonders vorsichtig, wenn Sie $ resource verwenden):

var cache = $cacheFactory('myCache');

var data = cache.get(someKey);

if (!data) {
   $http.get(url).success(function(result) {
      data = result;
      cache.put(someKey, data);
   });
}
312
asgoth

Ich denke, es gibt jetzt einen noch einfacheren Weg. Dies aktiviert das grundlegende Caching für alle $ http-Anforderungen (die $ resource übernimmt):

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

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

Fügen Sie nach dem Einrichten Ihres Moduls eine Factory 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 übergeben:

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

Ein Nachteil ist, dass die Tastennamen ebenfalls automatisch eingerichtet werden, was das Löschen erschweren kann. Hoffentlich fügen sie etwas hinzu, um Schlüsselnamen zu erhalten.

12
James Skemp

Schauen Sie sich die Bibliothek an Angular-Cache , wenn Sie das integrierte Caching von $ http mögen, aber mehr Kontrolle wünschen. Sie können damit den $ http-Cache nahtlos erweitern, indem Sie die Restlaufzeit und regelmäßige Löschvorgänge festlegen und den Cache in localStorage beibehalten, sodass er über mehrere Sitzungen hinweg verfügbar ist.

FWIW bietet außerdem Tools und Muster, mit denen Sie Ihren Cache in eine dynamischere Art von Datenspeicher verwandeln können, mit dem Sie als POJOs interagieren können, und nicht nur als Standard-JSON-Zeichenfolgen. Ich kann den Nutzen dieser Option noch nicht kommentieren.

(Außerdem ist die zugehörige Bibliothek Angular-Daten eine Art Ersatz für $ resource und/oder Restangular und hängt vom Angular-Cache ab.)

7
XML

Da AngularJS-Fabriken Singletons sind, können Sie das Ergebnis der http-Anforderung einfach speichern und es abrufen, wenn Ihr Service das nächste Mal in etwas eingefügt wird.

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

setzen Sie den Cache auf true.

2
Howardyan