Voglio essere in grado di creare un servizio AngularJS personalizzato che effettua una richiesta HTTP "Get" quando il suo oggetto dati è vuoto e popola l'oggetto dati in caso di successo.

La prossima volta che viene effettuata una chiamata a questo servizio, vorrei bypassare il sovraccarico di effettuare nuovamente la richiesta HTTP e restituire invece l'oggetto dati memorizzato nella cache.

È possibile?

$ Http di Angular ha una cache integrata . Secondo i documenti:

cache - {booleano | Oggetto} - Un valore booleano o un oggetto creato con $ cacheFactory per abilitare o disabilitare la memorizzazione nella cache della risposta HTTP. Vedi $ http Caching per maggiori informazioni .

Valore booleano

Quindi puoi impostare cachesu true nelle sue opzioni:

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

oppure, se si preferisce il tipo di configurazione della chiamata:

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

Oggetto cache

Puoi anche usare una cache factory:

var cache = $cacheFactory('myCache');

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

Puoi implementarlo tu stesso usando $ cacheFactory (specialmente a mano quando usi $ resource):

var cache = $cacheFactory('myCache');

var data = cache.get(someKey);

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

Penso che ci sia un modo ancora più semplice adesso. Ciò abilita la memorizzazione nella cache di base per tutte le richieste $ http (che $ risorse eredita):

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

Un modo più semplice per farlo nell'attuale versione stabile (1.0.6) richiede molto meno codice.

Dopo aver configurato il modulo aggiungere una fabbrica:

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

Ora puoi passare questo nel tuo controller:

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

Uno svantaggio è che anche i nomi delle chiavi vengono impostati automaticamente, il che potrebbe complicarne la cancellazione. Spero che aggiungano in qualche modo per ottenere i nomi delle chiavi.

Controlla la libreria angular-cache se ti piace la cache integrata di $ http ma desideri un maggiore controllo. È possibile utilizzarlo per aumentare senza problemi la cache $ http con eliminazioni periodiche time-to-live e l'opzione di persistere la cache in localStorage in modo che sia disponibile tra le sessioni.

Inoltre, fornisce anche strumenti e schemi per trasformare la cache in una sorta di archivio di dati più dinamico con cui è possibile interagire come POJO, anziché solo le stringhe JSON predefinite. Non posso ancora commentare l'utilità di quell'opzione.

(Inoltre, i dati angolari della libreria correlata sono una sorta di sostituto di $ resource e / o Restangular e dipendono dalla cache angolare.)

Poiché le fabbriche AngularJS sono singole , puoi semplicemente archiviare il risultato della richiesta http e recuperarlo la prossima volta che il tuo servizio viene iniettato in qualcosa.

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

imposta la cache come vera.

In Angular 8 possiamo fare così:

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;
    }
  }
}

Puoi chiamarlo così:

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


});

Il codice sopra memorizza nella cache il risultato dell'API remota alla prima chiamata in modo che possa essere utilizzato su ulteriori richieste a quel metodo.