一、什么是緩存

一個(gè)緩存就是一個(gè)組件，它可以透明地存儲(chǔ)數(shù)據(jù)，以便未來可以更快地服務(wù)于請求。

緩存能夠服務(wù)的請求越多，整體系統(tǒng)性能就提升得越多。

二、Angular 中的緩存

2.1 $cacheFactory 簡介

$cacheFactory 是一個(gè)為所有Angular服務(wù)生成緩存對象的服務(wù)。在內(nèi)部， $cacheFactory 會(huì)創(chuàng)建一個(gè)默認(rèn)的緩存對象，即使我們并沒有顯示地創(chuàng)建。

要?jiǎng)?chuàng)建一個(gè)緩存對象，可以使用 $cacheFactory 通過一個(gè)ID創(chuàng)建一個(gè)緩存：

var cache = $cacheFactory('myCache');
這個(gè) $cacheFactory 方法可以接受兩個(gè)參數(shù)：

cacheId （字符串）：這個(gè) cacheId 就是創(chuàng)建緩存時(shí)的ID名稱?？梢酝ㄟ^ get() 方法使用緩存名稱來引用它。

capacity ：這個(gè)容量描述了在任何給定時(shí)間要使用緩存存儲(chǔ)并保存的緩存鍵值對的最大數(shù)量。

2.2 緩存對象

緩存對象自身有下列這些方法可以用來與緩存交互。

info() ： info() 方法返回緩存對象的ID、尺寸和選項(xiàng)。

put() ： put() 方法允許我們把任意JavaScript對象值形式的鍵（字符串）放進(jìn)緩存中。cache.put("hello","world");

put() 方法會(huì)返回我們放入緩存中的值。

get() ： get() 方法讓我們能夠訪問一個(gè)鍵對應(yīng)的緩存值。如果找到了這個(gè)鍵，它會(huì)返回它的值；如果沒有找到，它會(huì)返回 undefined 。cache.get("hello");

remove() ： remove() 函數(shù)用于在找到一個(gè)鍵值對的情況下從緩存中移除它。如果沒有找到，它就會(huì)返回 undefined 。cache.remove("hello");

removeAll() ： removeAll() 函數(shù)用于重置緩存，同時(shí)移除所有已緩存的值。

destory() ： destory() 方法用于從 $cacheFactory 緩存注冊表中移除指定緩存的所有引用。

三、$http 中的緩存

Angular的 $http 服務(wù)創(chuàng)建了一個(gè)帶有ID為 $http 的緩存。 要讓 $http 請求使用默認(rèn)的緩存 對象很簡單： $http() 方法允許我們給它傳遞一個(gè) cache 參數(shù)。

 3.1 默認(rèn)的 $http 緩存

當(dāng)數(shù)據(jù)不會(huì)經(jīng)常改變時(shí)，默認(rèn)的 $http 緩存就特別有用了?？梢韵襁@樣設(shè)置它：

$http({
  method: 'GET',
  url: '/api/users.json',
  cache: true　　//設(shè)置為true只是用來使用$http默認(rèn)的緩存機(jī)制
});

現(xiàn)在，通過 $http 到URL /api/user.json 的每個(gè)請求將會(huì)存儲(chǔ)到默認(rèn)的 $http 緩存中。 這個(gè)$http 緩存中的請求鍵就是完整的URL路徑。

如果需要，也可以操作這個(gè)默認(rèn)的 $http 緩存（比如，如果我們發(fā)起的另外一個(gè)沒有緩存的請求提醒我們發(fā)生了增量變化，我們就可以在默認(rèn)的 $http 請求中清除這個(gè)請求）。

為了引用 $http 的默認(rèn)請求，只需通過 $cacheFactory() 使用ID來獲取到該緩存：

var cache = $cacheFactory('$http');

對于所掌控的緩存，我們可以在需要時(shí)進(jìn)行所有的正常操作，比如檢索已緩存的響應(yīng)，從緩存中清除條目，或者消除所有緩存的引用。

// 獲取上一次請求的緩存
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);　　//往緩存中放入數(shù)據(jù)
          console.log(data);
        }
      );
    }

3.2 自定義緩存

有時(shí)候能夠?qū)彺嬗懈嗟目刂埔约搬槍彺娴谋憩F(xiàn)創(chuàng)建規(guī)則，這就需要?jiǎng)?chuàng)建一個(gè)新的緩存來使用 $http 請求。

通過自定義的緩存來讓 $http 請求發(fā)起請求很簡單。可以采用傳遞緩存實(shí)例的方式，而不必傳遞一個(gè)布爾參數(shù) true 給請求。

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

一個(gè)小demo:定義一個(gè)緩存服務(wù)，依賴注入到你要用的控制器中，直接使用

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

    //自定義緩存,有緩存就從緩存里取，否則就發(fā)送請求
    if(myCache.get('cacheData')){
      console.log(myCache.get('cacheData'));
    }else{
      helloService.play(myCache).then(
        function (data) {
          myCache.put("cacheData", data);
          console.log(data);
        }
      );
    }
      cache:只是為了可以使用默認(rèn)$http的緩存機(jī)制
      play : function (myCache) {
        return httpRequestService.request({
          method : 'get',
          url : 'http://localhost:8080/hello/play',
          cache : myCache
        })
      }

現(xiàn)在， $http 將會(huì)使用自定義的緩存而非默認(rèn)緩存。

四、為 $http 設(shè)置默認(rèn)緩存

每次我們想要發(fā)起一個(gè) $http 請求時(shí)都要給它傳遞一個(gè)緩存實(shí)例并不方便，特別是對每個(gè)請求使用同一緩存的時(shí)候。

其實(shí)可以在模塊的 .config() 方法中通過 $httpProvider 設(shè)置 $http 默認(rèn)使用的緩存對象。

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

這個(gè) $http 服務(wù)不再使用它為我們創(chuàng)建的默認(rèn)緩存；它會(huì)使用我們自定義的緩存，實(shí)際上這就是一個(gè)近期緩存最久未使用算法① （Least Recently Used，LRU）。

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論