Quero poder criar um serviço AngularJS personalizado que faça uma solicitação HTTP 'Get' quando seu objeto de dados estiver vazio e preencha o objeto de dados com êxito.

Na próxima vez que uma chamada for feita para esse serviço, eu gostaria de ignorar a sobrecarga de fazer a solicitação HTTP novamente e, em vez disso, retornar o objeto de dados em cache.

Isso é possível?

O $ http da Angular possui um cache incorporado . De acordo com os documentos:

cache - {boolean | Object} - Um valor ou objeto booleano criado com $ cacheFactory para ativar ou desativar o armazenamento em cache da resposta HTTP. Consulte Cache de $ http para obter mais informações .

Valor booleano

Assim, você pode definir cachecomo true em suas opções:

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

ou, se você preferir o tipo de configuração de chamada:

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

Objeto de cache

Você também pode usar uma fábrica de cache:

var cache = $cacheFactory('myCache');

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

Você pode implementá-lo usando o $ cacheFactory (especialmente ao usar o recurso $):

var cache = $cacheFactory('myCache');

var data = cache.get(someKey);

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

Eu acho que há uma maneira ainda mais fácil agora. Isso permite o armazenamento em cache básico para todas as solicitações $ http (que $ resource herda):

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

Uma maneira mais fácil de fazer isso na versão estável atual (1.0.6) requer muito menos código.

Depois de configurar seu módulo, adicione uma 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');
});

Agora você pode passar isso para o seu controlador:

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

Uma desvantagem é que os nomes das chaves também são configurados automaticamente, o que pode dificultar a limpeza. Espero que eles adicionem de alguma forma para obter nomes-chave.

Confira o cache angular da biblioteca se você gosta do cache interno do $ http, mas deseja mais controle. Você pode usá-lo para aumentar perfeitamente o cache $ http com limpezas periódicas de tempo de vida e a opção de persistir o cache no localStorage para que ele fique disponível em todas as sessões.

FWIW, ele também fornece ferramentas e padrões para transformar seu cache em um tipo de armazenamento de dados mais dinâmico com o qual você pode interagir como POJO, em vez de apenas nas seqüências JSON padrão. Ainda não posso comentar sobre a utilidade dessa opção.

(Além disso, os dados angulares da biblioteca relacionada substituem o $ resource e / ou Restangular e dependem do cache angular.)

Como as fábricas do AngularJS são singletons , você pode simplesmente armazenar o resultado da solicitação http e recuperá-lo na próxima vez que seu serviço for injetado em 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}
        });
    }]);

defina o cache como verdadeiro.

No Angular 8, podemos fazer assim:

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

Você pode chamar assim:

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


});

O código acima armazenará em cache o resultado da API remota na primeira chamada, para que possa ser usada em solicitações adicionais para esse método.