Quiero poder crear un servicio personalizado de AngularJS que realice una solicitud HTTP 'Obtener' cuando su objeto de datos esté vacío y llene el objeto de datos con éxito.

La próxima vez que se realice una llamada a este servicio, me gustaría omitir la sobrecarga de realizar nuevamente la solicitud HTTP y, en su lugar, devolver el objeto de datos en caché.

es posible?

$ Http de Angular tiene un caché incorporado . Según los documentos:

cache - {boolean | Object} - Un valor booleano u objeto creado con $ cacheFactory para habilitar o deshabilitar el almacenamiento en caché de la respuesta HTTP. Vea $ http Caching para más información .

Valor booleano

Entonces puede establecerlo cacheen verdadero en sus opciones:

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

o, si prefiere el tipo de llamada de configuración:

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

Objeto de caché

También puede usar una fábrica de caché:

var cache = $cacheFactory('myCache');

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

Puede implementarlo usted mismo usando $ cacheFactory (especialmente útil cuando usa $ resource):

var cache = $cacheFactory('myCache');

var data = cache.get(someKey);

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

Creo que hay una manera aún más fácil ahora. Esto permite el almacenamiento en caché básico para todas las solicitudes $ http (que $ resource hereda):

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

Una forma más fácil de hacer esto en la versión estable actual (1.0.6) requiere mucho menos código.

Después de configurar su módulo, agregue una fábrica:

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

Ahora puede pasar esto a su controlador:

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

Una desventaja es que los nombres clave también se configuran automáticamente, lo que podría dificultar su eliminación. Esperemos que agreguen de alguna manera para obtener nombres clave.

Eche un vistazo a la biblioteca de caché angular si le gusta el almacenamiento en caché incorporado de $ http pero quiere más control. Puede usarlo para aumentar sin problemas el caché de $ http con purgas periódicas de tiempo de vida y la opción de mantener el caché en localStorage para que esté disponible en todas las sesiones.

FWIW, también proporciona herramientas y patrones para convertir su caché en un tipo de almacén de datos más dinámico con el que puede interactuar como POJO, en lugar de solo las cadenas JSON predeterminadas. No puedo comentar sobre la utilidad de esa opción todavía.

(Luego, además de eso, los datos angulares de la biblioteca relacionada son una especie de reemplazo de $ resource y / o Restangular, y dependen de la memoria caché angular).

Como las fábricas de AngularJS son singletons , simplemente puede almacenar el resultado de la solicitud http y recuperarlo la próxima vez que su servicio se inyecte en algo.

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

configura el caché para que sea verdadero.

En Angular 8 podemos hacer así:

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

Puedes llamarlo así:

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


});

El código anterior almacenará en caché el resultado de la API remota en la primera llamada para que pueda usarse en solicitudes adicionales a ese método.