Cómo almacenar en caché un servicio de obtención de http en angularjs

ng-href angular 5

Question

Quiero poder crear un servicio personalizado que recupere una solicitud de obtención de http en el caso en que el objeto de datos de ts esté vacío y rellene el objeto de datos en caso de éxito. La próxima vez que se realice una llamada de servicio, el dispositivo no llamará al http http y en su lugar presentará el objeto de datos.

¿Alguna idea de como hacerlo?

Answer 1

Angular''s $http tiene un caché incorporado . Según los documentos:

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

Valor booleano

Para que pueda configurar el cache en verdadero en sus opciones:

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

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

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

Objeto de caché

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

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

Puede implementarlo usted mismo usando $cacheFactory (especialmente a mano cuando se 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);
});
}

Answer 2

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

Answer 3

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

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

Answer 4

Echa un vistazo a la biblioteca angular-cache si te gusta el almacenamiento en caché integrado de $ http pero quieres más control. Puede usarlo para aumentar sin problemas la caché http $ con tiempo de vida, purgas periódicas y la opción de conservar la caché en el almacenamiento local 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 angular-data biblioteca relacionada reemplazan a $ resource y / o Restangular, y dependen de la memoria caché angular).

Answer 5

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 puedes pasar esto a tu controlador:

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

Un inconveniente es que los nombres de las teclas también se configuran automáticamente, lo que podría dificultar su limpieza. Esperemos que agreguen de alguna manera para obtener nombres clave.

Answer 6

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

establece el caché como verdadero.