angularjs カスタム キャッシュの使用例の詳細な説明

今回はangularjsカスタムキャッシュの使用例について詳しく説明します。angularjsカスタムキャッシュを使用する際の注意点は何ですか?実際のケースを見てみましょう。

1. キャッシュとは何ですか

キャッシュは、将来のリクエストをより速く処理できるように、データを透過的に保存するコンポーネントです。

キャッシュが処理できるリクエストが増えるほど、システム全体のパフォーマンスが向上します。

2. Angular でのキャッシュ

2.1 $cacheFactory の概要

$cacheFactory は、すべての Angular サービスのキャッシュ オブジェクトを生成するサービスです。明示的に作成しなくても、$cacheFactory は内部的にデフォルトのキャッシュ オブジェクトを作成します。

キャッシュ オブジェクトを作成するには、$cacheFactory を使用して ID によってキャッシュを作成できます:

var queue = $cacheFactory('myCache');
この $cacheFactory メソッドは 2 つのパラメータを受け入れることができます:

cacheId (String ): このcacheIdはキャッシュ作成時のID名です。 get() メソッド経由でキャッシュ名を使用して参照できます。

容量: この容量は、任意の時点でキャッシュを使用して格納および保存されるキャッシュのキーと値のペアの最大数を表します。

2.2 キャッシュ オブジェクト

キャッシュ オブジェクト自体には、キャッシュと対話するために使用できる次のメソッドがあります。

info(): info() メソッドは、キャッシュ オブジェクトの ID、サイズ、オプションを返します。

put(): put() メソッドを使用すると、任意の JavaScript オブジェクトキー (文字列) を値の形式でキャッシュに入れることができます。 cache.put("hello","world");

put() メソッドは、キャッシュに置いた値を返します。

get(): get() メソッドを使用すると、キーに対応するキャッシュ値にアクセスできます。キーが見つかった場合はその値を返し、見つからなかった場合は unknown を返します。 cache.get("hello");

remove() : Remove() 関数は、キーと値のペアが見つかった場合にキャッシュから削除するために使用されます。見つからない場合は、 unknown を返します。 ache.remove("hello");

removeAll(): RemoveAll() 関数は、キャッシュをリセットし、キャッシュされたすべての値を削除するために使用されます。

destory(): destory() メソッドは、指定されたキャッシュへのすべての参照を $cacheFactory キャッシュ レジストリから削除するために使用されます。

3. $http のキャッシュ

Angular の $http サービスは、ID $http のキャッシュを作成します。 $http リクエストにデフォルトのキャッシュ オブジェクトを使用させるのは簡単です。$http() メソッドを使用すると、それにキャッシュ パラメータを渡すことができます。

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 のデフォルトのリクエストを参照するには、次の ID を使用して $cacheFactory() を通じてキャッシュを取得するだけです:

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中文网其它相关文章！

推荐阅读：

FIFO/LRU实现缓存算法

nodejs连接mysql数据库步骤详解

以上がangularjs カスタム キャッシュの使用例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。