Cómo operar el caché de angularjs

Esta vez le mostraré cómo operar el caché de Angularjs y cuáles son las precauciones para operar el caché de Angularjs. El siguiente es un caso práctico, echemos un vistazo.

1. ¿Qué es un caché?

Un caché es un componente que puede almacenar datos de forma transparente para que las solicitudes futuras puedan atenderse más rápido.

Cuantas más solicitudes pueda atender la caché, más mejorará el rendimiento general del sistema.

2. Almacenamiento en caché en Angular

2.1 Introducción a $cacheFactory

$cacheFactory es un servicio que genera objetos de caché para todos los servicios de Angular. Internamente, $cacheFactory crea un objeto de caché predeterminado, incluso si no lo creamos explícitamente.

Para crear un objeto de caché, puede usar $cacheFactory para crear un caché mediante un ID:

var cache = $cacheFactory('myCache');

Este método $cacheFactory puede aceptar dos parámetros:

cacheId (cadena): este cacheId es el nombre de ID al crear el caché. Se puede hacer referencia a él utilizando el nombre de la caché mediante el método get().

capacidad: esta capacidad describe el número máximo de pares clave-valor de caché que se almacenarán y guardarán utilizando el caché en un momento dado.

2.2 Objeto de caché

El objeto de caché en sí tiene los siguientes métodos que se pueden utilizar para interactuar con el caché.

info(): El método info() devuelve el ID, el tamaño y las opciones del objeto de caché.

put(): El método put() nos permite poner cualquier clave (cadena) en forma de valor de objeto JavaScript en la caché. cache.put("hello", "world");

El método put() devuelve el valor que ponemos en el caché.

get(): El método get() nos permite acceder al valor de la caché correspondiente a una clave. Si se encuentra la clave, devuelve su valor; si no, devuelve undefinido. cache.get("hello");

remove(): la función remove() se utiliza para eliminar un par clave-valor del caché si se encuentra. Si no se encuentra, devuelve indefinido. cache.remove("hello");

removeAll(): la función removeAll() se utiliza para restablecer el caché y eliminar todos los valores almacenados en caché.

destory(): El método destory() se utiliza para eliminar todas las referencias al caché especificado del registro de caché $cacheFactory.

3. $/api.users.json');

// Eliminar la entrada de caché de la última solicitud

cache.remove('/api .users.json');

//Reiniciar y eliminar todos los cachés

cache.removeAll(); var cache = $cacheFactory.get('$http');< / p>

if(cache.get('cacheData')){

console.log(cache.get('cacheData'));

}else{< / p>

helloService.play().then(

function (data) {

cache.put("cacheData", data);// Ponlo en el caché Ingrese datos

console.log(data);

}

}3.2 Caché personalizado

< p); >A veces es posible tener más control sobre el caché y crear reglas para el comportamiento del caché, lo que requiere crear un nuevo caché para usar solicitudes $http.

Es fácil realizar solicitudes $http a través de un caché personalizado. En lugar de pasar un parámetro booleano verdadero a la solicitud, puede pasar la instancia de caché.

var myCache = $cacheFactory('myCache');

$http({

método: 'GET',

utl : '/api/users.json',

cache: myCache

}); una pequeña demostración: define un servicio de caché e inyecta dependencias en el controlador que deseas usar. directamente

define([

'angularModule'

], function(app){

app.factory('myCache', ['$cacheFactory', function($cacheFactory){

return $cacheFactory('myCache'); //Personalizar un servicio de caché

}])

}); //Personaliza el caché. Si hay un caché, recupéralo del caché; de lo contrario, envía la solicitud

if(myCache.get('cacheData')){

<. p> console.log(myCache.get('cacheData'));

}else{

helloService.play(myCache).then(

función (datos ) {

myCache.put("cacheData", datos

console.log(datos

}

) ;

}

caché: solo para usar el mecanismo de almacenamiento en caché $http predeterminado

play: function (myCache) {

devolver httpRequestService.request({

método: 'get',

url: 'http://localhost:8080/hello/play',

caché : myCache

})

}Ahora, $http usará un caché personalizado en lugar del caché predeterminado.

4. Establecer el caché predeterminado para $http

No es conveniente pasarle una instancia de caché cada vez que queremos iniciar una solicitud $http, especialmente para cada vez que solicitamos utilizar el mismo caché.

De hecho, puedes configurar el objeto de caché utilizado por $http de forma predeterminada a través de $httpProvider en el método .config() del módulo.

angular.module('myApp', []).config(function($httpProvider) {

$httpProvider.defaults.cache = $cacheFactory('myCache', {capacidad : 20});

}); este servicio $http ya no usa el caché predeterminado que creó para nosotros. De hecho, este es un algoritmo de caché reciente que no se utiliza. (Menos utilizado recientemente, LRU).

La caché LRU solo conserva el último número de caché según la capacidad de la caché.

En otras palabras, nuestra capacidad de caché es 20, por lo que las primeras 20 solicitudes se almacenarán en caché, pero al ingresar la solicitud número 21, la entrada de solicitud utilizada menos recientemente se eliminará de la caché. El caché en sí será responsable de lo que se debe mantener y de lo que se debe eliminar.

Creo que domina el método después de leer el caso de este artículo. Para obtener más información interesante, preste atención a otros artículos relacionados en Gxl.com.

Lectura recomendada:

jquery fullpage agrega encabezados y derechos de autor en la interfaz

Cómo usar la LAN del entorno webpack vue