首頁 > 文章 > web前端 > angularjs的緩存詳解

angularjs的緩存詳解

php中世界最好的语言原創: 2018-03-19 14:22:241372瀏覽

這次帶給大家angularjs的快取詳解，使用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請求中清除這個請求）。

 cache = $cacheFactory('$http' 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个请求时，最近最少使用的请求条目就会从缓存中被删除。这个缓存自身会负责具体哪些要维护，哪些要移除。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

angularjs的緩存詳解

相關文章