angularjs 緩存的使用詳解

一、什么是緩存

一個緩存就是一個組件，它可以透明地存儲數(shù)據(jù)，以便未來可以更快地服務(wù)于請求。

緩存能夠服務(wù)的請求越多，整體系統(tǒng)性能就提升得越多。

二、Angular 中的緩存

2.1 $cacheFactory 簡介

$cacheFactory 是一個為所有Angular服務(wù)生成緩存對象的服務(wù)。在內(nèi)部， $cacheFactory 會創(chuàng)建一個默認的緩存對象，即使我們并沒有顯示地創(chuàng)建。

要創(chuàng)建一個緩存對象，可以使用 $cacheFactory 通過一個ID創(chuàng)建一個緩存：

var cache = $cacheFactory('myCache');
這個 $cacheFactory 方法可以接受兩個參數(shù)：

cacheId （字符串）：這個 cacheId 就是創(chuàng)建緩存時的ID名稱?？梢酝ㄟ^ get() 方法使用緩存名稱來引用它。

capacity ：這個容量描述了在任何給定時間要使用緩存存儲并保存的緩存鍵值對的最大數(shù)量。

2.2 緩存對象

緩存對象自身有下列這些方法可以用來與緩存交互。

info() ： info() 方法返回緩存對象的ID、尺寸和選項。

put() ： put() 方法允許我們把任意JavaScript對象值形式的鍵（字符串）放進緩存中。cache.put("hello","world");

put() 方法會返回我們放入緩存中的值。

get() ： get() 方法讓我們能夠訪問一個鍵對應(yīng)的緩存值。如果找到了這個鍵，它會返回它的值；如果沒有找到，它會返回 undefined 。cache.get("hello");

remove() ： remove() 函數(shù)用于在找到一個鍵值對的情況下從緩存中移除它。如果沒有找到，它就會返回 undefined 。cache.remove("hello");

removeAll() ： removeAll() 函數(shù)用于重置緩存，同時移除所有已緩存的值。

destory() ： destory() 方法用于從 $cacheFactory 緩存注冊表中移除指定緩存的所有引用。

三、$http 中的緩存

Angular的 $http 服務(wù)創(chuàng)建了一個帶有ID為 $http 的緩存。 要讓 $http 請求使用默認的緩存 對象很簡單： $http() 方法允許我們給它傳遞一個 cache 參數(shù)。

 3.1 默認的 $http 緩存

當(dāng)數(shù)據(jù)不會經(jīng)常改變時，默認的 $http 緩存就特別有用了?？梢韵襁@樣設(shè)置它：

$http({
  method: 'GET',
  url: '/api/users.json',
  cache: true　　//設(shè)置為true只是用來使用$http默認的緩存機制
});

現(xiàn)在，通過 $http 到URL /api/user.json 的每個請求將會存儲到默認的 $http 緩存中。 這個$http 緩存中的請求鍵就是完整的URL路徑。

如果需要，也可以操作這個默認的 $http 緩存（比如，如果我們發(fā)起的另外一個沒有緩存的請求提醒我們發(fā)生了增量變化，我們就可以在默認的 $http 請求中清除這個請求）。

為了引用 $http 的默認請求，只需通過 $cacheFactory() 使用ID來獲取到該緩存：

var cache = $cacheFactory('$http');

對于所掌控的緩存，我們可以在需要時進行所有的正常操作，比如檢索已緩存的響應(yīng)，從緩存中清除條目，或者消除所有緩存的引用。

// 獲取上一次請求的緩存
var usersCache = cache.get('http://example.com/api.users.json');
// 刪除上一次請求的緩存入口
cache.remove('http://example.com/api.users.json');
// 重新開始并移除全部緩存
cache.removeAll();

    var cache = $cacheFactory.get('$http');
    if(cache.get('cacheData')){
      console.log(cache.get('cacheData'));
    }else{
      helloService.play().then(
        function (data) {
          cache.put("cacheData", data);　　//往緩存中放入數(shù)據(jù)
          console.log(data);
        }
      );
    }

3.2 自定義緩存

有時候能夠?qū)彺嬗懈嗟目刂埔约搬槍彺娴谋憩F(xiàn)創(chuàng)建規(guī)則，這就需要創(chuàng)建一個新的緩存來使用 $http 請求。

通過自定義的緩存來讓 $http 請求發(fā)起請求很簡單?？梢圆捎脗鬟f緩存實例的方式，而不必傳遞一個布爾參數(shù) true 給請求。

var myCache = $cacheFactory('myCache');
$http({
　　method: 'GET',
　　utl: '/api/users.json',
　　cache: myCache
});

一個小demo:定義一個緩存服務(wù)，依賴注入到你要用的控制器中，直接使用

define([
  'angularModule'
],function(app){
  app.factory('myCache', ['$cacheFactory', function($cacheFactory){
    return $cacheFactory('myCache'); //自定義一個緩存服務(wù)
  }])
});

    //自定義緩存,有緩存就從緩存里取，否則就發(fā)送請求
    if(myCache.get('cacheData')){
      console.log(myCache.get('cacheData'));
    }else{
      helloService.play(myCache).then(
        function (data) {
          myCache.put("cacheData", data);
          console.log(data);
        }
      );
    }
      cache:只是為了可以使用默認$http的緩存機制
      play : function (myCache) {
        return httpRequestService.request({
          method : 'get',
          url : 'http://localhost:8080/hello/play',
          cache : myCache
        })
      }

現(xiàn)在， $http 將會使用自定義的緩存而非默認緩存。

四、為 $http 設(shè)置默認緩存

每次我們想要發(fā)起一個 $http 請求時都要給它傳遞一個緩存實例并不方便，特別是對每個請求使用同一緩存的時候。

其實可以在模塊的 .config() 方法中通過 $httpProvider 設(shè)置 $http 默認使用的緩存對象。

angular.module('myApp', []).config(function($httpProvider) {
　　$httpProvider.defaults.cache = $cacheFactory('myCache', {capacity: 20});
});

這個 $http 服務(wù)不再使用它為我們創(chuàng)建的默認緩存；它會使用我們自定義的緩存，實際上這就是一個近期緩存最久未使用算法① （Least Recently Used，LRU）。

LRU緩存根據(jù)緩存容量只保留最新的緩存數(shù)目。也就是說，我們的緩存容量為20，因此會緩存前20個請求，但是進入第21個請求時，最近最少使用的請求條目就會從緩存中被刪除。這個緩存自身會負責(zé)具體哪些要維護，哪些要移除。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。