$cachefactory / angular / cache / http

Potencialize o serviço $ http do Angular com cache

Potencialize o serviço $ http do Angular com cache

<a name=”intro”> </a>

Introdução

Angular.js balança e você está voando alto fazendo solicitações AJAX a torto e a direito. Injete $http, atire em uma solicitação e boom – o serviço baseado em promessa atinge seu erro ou retorno de chamada de sucesso.

$http.get('/foo/bar/' + itemId)
  .success(function (data) {
    data; // { foo: 'bar' }
  })
  .error(function (data, status, headers, config) {
    // uh oh
  });

Ok, então você tem seus dados de seu back-end – e agora? Esse dado específico não muda com muita frequência, e você está se perguntando por que seu cliente faz repetidamente a mesma solicitação para os mesmos dados – que desperdício! Economize algum tempo e largura de banda de seus usuários e diga a essa solicitação para usar o cache!

$http.get('/foo/bar/' + itemId, { cache: true })
  .success(function (data) {
    data; // { foo: 'bar' }
  })
  .error(function (data, status, headers, config) {
    // uh oh
  });

Doce! Agora, na primeira vez que $httpenvia uma GETsolicitação para , por exemplo, a resposta será armazenada em um cache denominado “$ http”. Este cache é criado pelo Angular’s como o cache padrão para o serviço quando o Angular é inicializado. diz ao serviço para armazenar em cache a resposta a essa solicitação específica no cache padrão de. Você não precisa fazer mais nada. Quaisquer solicitações subsequentes para simplesmente usarão a resposta em cache. Arrumado!/foo/bar/123$cacheFactory$http{ cache: true }$http$http/foo/bar/123

Se você quiser, pode realmente fazer referência $httpao cache padrão e recuperar itens, remover itens, limpar o cache, etc. Basta injetar $cacheFactoryem tudo o que estiver trabalhando e fazer referência $httpao cache padrão por meio de:

var $httpDefaultCache = $cacheFactory.get('$http');

Você pode recuperar a resposta em cache ao GETsolicitado acima usando o url absoluto da solicitação.

var cachedData = $httpDefaultCache.get('http://myserver.com/foo/bar/123'); // { foo: 'bar' }

Você pode limpar esse item do cache:

$httpDefaultCache.remove('http://myserver.com/foo/bar/123');

Ou limpe todo o cache:

$httpDefaultCache.removeAll();

Veja $ cacheFactory para uma referência completa.

<a name=”lru-cache”> </a>

Cache LRU

E se você não quiser que $httpo cache padrão armazene todas as respostas? Simples: transforme-o em um cache LRU (menos usado recentemente).

// Create a new cache with a capacity of 10
var lruCache = $cacheFactory('lruCache', { capacity: 10 });

// Use the new cache for this request
$http.get('/foo/bar/' + itemId, { cache: lruCache })
  .success(function (data) {
    data; // { foo: 'bar' }
  })
  .error(function (data, status, headers, config) {
    // uh oh
  });

A resposta a cada solicitação será armazenada em cache, mas desta vez o cache só tem capacidade para 10. Quando a décima primeira solicitação única for feita, o item acessado menos recentemente será removido do cache, mantendo o número total de itens em cache em 10 Este cache mantém uma lista de seus itens na ordem de quão recentemente eles foram acessados, para que ele saiba qual deles remover quando o armazenamento de um novo item exceder a capacidade./foo/bar/:itemId

<a name=”setting-default”> </a>

Configurando um cache padrão

Conforme mostrado no exemplo de LRU, você pode dizer a uma $httpsolicitação para usar um cache diferente do $httpcache padrão, mas e se quiser alterar $httpo cache padrão? É fácil:

$httpProvider.defaults.cache = $cacheFactory('myNewDefaultCache', { capacity: 100 });

$httpagora usará myNewDefaultCachecomo cache padrão.

<a name=”advanced-caching”> </a>

Cache avançado

E se você quiser armazenar dados em cache para melhorar a experiência do usuário, mas os dados podem mudar uma vez por dia ou a cada poucas horas, etc. Você gostaria de ter certeza de que seus dados em cache sejam apagados pelo menos uma vez por dia, a cada dez minutos , etc. Infelizmente, o Angular’s $cacheFactorynão oferece esses recursos.

Você poderia hackear algo junto usando ou , mas não quer fazer isso. Para resolver esse problema, criei o angular-cache , um módulo Angular drop-in que dá acesso ao , que cria caches com mais recursos. Com seus caches pode limpar-se periodicamente com . Ao adicionar a um cache, você pode especificar um , que é a quantidade máxima de tempo que um determinado item ficará no cache antes de ser removido automaticamente. Ou você pode especificar um para todo o cache que será aplicado a cada item adicionado ao cache.setInterval()setTimeout()$angularCacheFactoryangular-cachecacheFlushIntervalmaxAgemaxAge

Vou encaminhá-lo à documentação do cache angular para referência futura.

Feliz caching!

Related Posts