首頁 >web前端 >js教程 >angularjs自訂快取使用案例詳解

angularjs自訂快取使用案例詳解

php中世界最好的语言原創: 2018-05-10 10:36:391560瀏覽

這次帶給大家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 請求中清除這個請求）。

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

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

angularjs自訂快取使用案例詳解

相關文章