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

Wenn dieser Dienst das nächste Mal aufgerufen wird, möchte ich den Aufwand für das erneute Ausführen der HTTP-Anforderung umgehen und stattdessen das zwischengespeicherte Datenobjekt zurückgeben.

Ist das möglich?

In Angulars $ http ist ein Cache integriert . Laut den Dokumenten:

cache - {boolean | Object} - Ein boolescher Wert oder ein Objekt, das mit $ cacheFactory erstellt wurde, um das Caching der HTTP-Antwort zu aktivieren oder zu deaktivieren. Weitere Informationen finden Sie unter $ http Caching .

Boolescher Wert

So können Sie in seinen Optionen cacheauf true setzen :

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

oder, wenn Sie den Konfigurationstyp 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 $ cacheFactory implementieren (besonders praktisch, 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);
   });
}

Ich denke, es gibt jetzt einen noch einfacheren Weg. Dies ermöglicht das grundlegende Caching für alle $ http-Anforderungen (die $ resource 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.

Fügen Sie nach dem Einrichten Ihres Moduls 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 ü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 Schlüsselnamen auch automatisch eingerichtet werden, was das Löschen schwierig machen kann. Hoffentlich fügen sie etwas hinzu, um Schlüsselnamen zu erhalten.

Schauen Sie sich den Winkel-Cache der Bibliothek an, wenn Sie das integrierte Caching von $ http mögen, aber mehr Kontrolle wünschen. Sie können es verwenden, um den $ http-Cache nahtlos mit einer regelmäßigen Lebensdauer der Lebensdauer und der Option zu erweitern, den Cache für localStorage beizubehalten, damit er sitzungsübergreifend verfügbar ist.

FWIW bietet außerdem Tools und Muster, mit denen Sie Ihren Cache zu einem dynamischeren Datenspeicher machen können, mit dem Sie als POJOs interagieren können, und nicht nur mit den Standard-JSON-Zeichenfolgen. Ich kann das Dienstprogramm dieser Option noch nicht kommentieren.

(Dann Hinzu kommt, dass, im Zusammenhang Bibliothek Winkeldaten sind eine Art Ersatz für $ Ressourcen- und / oder Restangular, und hängen von Winkel-cache) .

Da AngularJS-Fabriken Singletons sind , können Sie das Ergebnis der http-Anforderung einfach speichern und abrufen, wenn Ihr Dienst das nächste Mal in etwas injiziert 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;
      }
    };
  }
);

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.

In Angular 8 können wir Folgendes tun:

import { Injectable } from '@angular/core';
import { YourModel} from '../models/<yourModel>.model';
import { UserService } from './user.service';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class GlobalDataService {

  private me: <YourModel>;

  private meObservable: Observable<User>;

  constructor(private yourModalService: <yourModalService>, private http: HttpClient) {

  }

  ngOnInit() {

  }


  getYourModel(): Observable<YourModel> {

    if (this.me) {
      return of(this.me);
    } else if (this.meObservable) {
      return this.meObservable;
    }
    else {
      this.meObservable = this.yourModalService.getCall<yourModel>() // Your http call
      .pipe(
        map(data => {
          this.me = data;
          return data;
        })
      );
      return this.meObservable;
    }
  }
}

Sie können es so nennen:

this.globalDataService.getYourModel().subscribe(yourModel => {


});

Der obige Code speichert das Ergebnis der Remote-API beim ersten Aufruf im Cache, damit es bei weiteren Anforderungen an diese Methode verwendet werden kann.