Como armazenar em cache um serviço http get em angularjs

Eu quero ser capaz de criar um serviço personalizado que busca uma solicitação get http no caso de object de dados ts está vazio e preencher o object de dados em sucesso. Na próxima vez que uma chamada de serviço for feita, o dispositivo não chamará o http get e, em vez disso, apresentará o object de dados.

Alguma ideia de como fazer?

$ Http do Angular tem um cache embutido . Segundo os docs:

cache – {boolean | Object} – Um valor booleano ou object criado com $ cacheFactory para ativar ou desativar o armazenamento em cache da resposta HTTP. Veja $ http Caching para mais informações .

Valor booleano

Então você pode configurar o cache para true em suas opções:

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

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

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

Objeto de Cache

Você também pode usar um factory de cache:

 var cache = $cacheFactory('myCache'); $http.get(url, { cache: cache }) 

Você mesmo pode implementá-lo usando $ cacheFactory (especialmente quando 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); }); } 

Eu acho que há um jeito ainda mais fácil agora. Isso permite o armazenamento em cache básico para todas as solicitações $ http (as quais $ 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 poderia torná-los complicados. Espero que eles adicionem de alguma forma os nomes das chaves.

Verifique a biblioteca angular-cache se você gosta do cache embutido do $ http, mas quer mais controle. Você pode usá-lo para aumentar continuamente o cache $ http com limpezas periódicas do tempo de vida e a opção de persistir o cache no localStorage para que ele esteja disponível nas sessões.

O FWIW também fornece ferramentas e padrões para tornar seu cache em um tipo de armazenamento de dados mais dynamic com o qual você pode interagir como POJO, em vez de apenas as strings JSON padrão. Ainda não é possível comentar sobre o utilitário dessa opção.

(Então, além disso, os dados angulares da biblioteca relacionada são uma espécie de substituto para $ resource e / ou Restangular, e dependem do cache angular.)

Como as fábricas AngularJS são singletons , você pode simplesmente armazenar o resultado da solicitação http e recuperá-la 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} }); }]); 

configure o cache para ser verdadeiro.