這次帶給大家怎麼操作angularjs緩存,操作angularjs快取的注意事項有哪些,下面就是實戰案例,一起來看一下。
一、什麼是快取
一個快取就是一個元件,它可以透明地儲存數據,以便未來可以更快地服務於請求。
快取能夠服務的請求越多,整體系統效能就提升得越多。
二、Angular 中的快取
2.1 $cacheFactory 簡介
##$cacheFactory 是一個為所有Angular服務產生快取物件的服務。在內部, $cacheFactory 會建立一個預設的快取對象,即使我們並沒有顯示地建立。 要建立一個快取對象,可以用$cacheFactory 透過一個ID建立一個快取:var cache = $cacheFactory('myCache');這個$cacheFactory 方法可以接受兩個參數:
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默认的缓存机制 });
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 });
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 请求时都要给它传递一个缓存实例并不方便,特别是对每个请求使用同一缓存的时候。
其实可以在模块的 .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緩存的詳細內容。更多資訊請關注PHP中文網其他相關文章!