angularjs 緩存詳解

一、什麼是緩存

一個緩存就是一個組件，它可以透明地存儲數據，以便未來可以更快地服務於請求。

緩存能夠服務的請求越多，整體系統性能就提升得越多。

二、Angular 中的緩存

2.1 $cacheFactory 簡介

$cacheFactory 是一個為所有Angular服務生成緩存對象的服務。在內部， $cacheFactory 會創建一個預設的緩存對象，即使我們並沒有顯示地創建。

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

var cache = $cacheFactory('myCache');

這個 $cacheFactory 方法可以接受兩個參數：

cacheId （字元串）：這個 cacheId 就是創建緩存時的ID名稱。可以通過 get() 方法使用緩存名稱來引用它。

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

2.2 緩存對象

緩存對象自身有下列這些方法可以用來與緩存交互。
info() ： info() 方法返回緩存對象的ID、尺寸和選項。
put() ： put() 方法允許我們把任意JavaScript對象值形式的鍵（字元串）放進緩存中。cache.put("hello","world");
put() 方法會返回我們放入緩存中的值。
get() ： get() 方法讓我們能夠訪問一個鍵對應的緩存值。如果找到了這個鍵，它會返回它的值；如果沒有找到，它會返回 undefined 。cache.get("hello");
remove() ： remove() 函數用於在找到一個鍵值對的情況下從緩存中移除它。如果沒有找到，它就會返回 undefined 。cache.remove("hello");
removeAll() ： removeAll() 函數用於重置緩存，同時移除所有已緩存的值。
destory() ： destory() 方法用於從 $cacheFactory 緩存註冊表中移除指定緩存的所有引用。

三、$http 中的緩存

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

 3.1 預設的 $http 緩存
當數據不會經常改變時，預設的 $http 緩存就特別有用了。可以像這樣設置它：

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

現在，通過 $http 到URL /api/user.json 的每個請求將會存儲到預設的 $http 緩存中。這個$http 緩存中的請求鍵就是完整的URL路徑。

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

為了引用 $http 的預設請求，只需通過 $cacheFactory() 使用ID來獲取到該緩存：
var cache = $cacheFactory('$http');

對於所掌控的緩存，我們可以在需要時進行所有的正常操作，比如檢索已緩存的響應，從緩存中清除條目，或者消除所有緩存的引用。
// 獲取上一次請求的緩存
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);　　//往緩存中放入數據
                    console.log(data);
                }
            );
        }

 3.2 自定義緩存

有時候能夠對緩存有更多的控制以及針對緩存的表現創建規則，這就需要創建一個新的緩存來使用 $http 請求。

通過自定義的緩存來讓 $http 請求發起請求很簡單。可以採用傳遞緩存實例的方式，而不必傳遞一個布爾參數 true 給請求。

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

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

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

        //自定義緩存,有緩存就從緩存里取，否則就發送請求
        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
                })
            }

 現在， $http 將會使用自定義的緩存而非預設緩存。

四、為 $http 設置預設緩存

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

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

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

這個 $http 服務不再使用它為我們創建的預設緩存；它會使用我們自定義的緩存，實際上這就是一個近期緩存最久未使用演算法① （Least Recently Used，LRU）。

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