Detaillierte Erläuterung der Anwendungsfälle für benutzerdefinierten AngularJS-Cache

Dieses Mal erkläre ich Ihnen ausführlich den Anwendungsfall von AngularJS. Was sind die Vorsichtsmaßnahmen bei der Verwendung von AngularJS? Das Folgende ist ein praktischer Fall Schauen Sie mal rein.

1. Was ist ein Cache?

Ein Cache ist eine Komponente, die Daten transparent speichern kann, damit sie in Zukunft schneller bereitgestellt werden können fragen.

Je mehr Anfragen der Cache bedienen kann, desto mehr verbessert sich die Gesamtsystemleistung.

2. Caching in Angular

2.1 Einführung in $cacheFactory

$cacheFactory ist ein Ein Dienst, der Cache-Objekte für alle Angular-Dienste generiert. Intern erstellt $cacheFactory ein Standard-Cache-Objekt, auch wenn wir es nicht explizit erstellen.

Um ein Cache-Objekt zu erstellen, können Sie $cacheFactory verwenden, um einen Cache anhand einer ID zu erstellen:

var cache = $cacheFactory('myCache');
Diese $cacheFactory-Methode kann Akzeptieren Sie zwei Parameter:

cacheId (String): Diese CacheId ist der ID-Name beim Erstellen des Caches. Es kann mithilfe des Cache-Namens über die Methode get() referenziert werden.

Kapazität: Diese Kapazität beschreibt die maximale Anzahl von Cache-Schlüssel-Wert-Paaren, die zu einem bestimmten Zeitpunkt gespeichert und mithilfe des Caches gespeichert werden sollen.

2.2 Cache-Objekt

Das Cache-Objekt selbst verfügt über die folgenden Methoden, die zur Interaktion mit dem Cache verwendet werden können.

info(): Die Methode info() gibt die ID, Größe und Optionen des Cache-Objekts zurück.

put(): Mit der put()-Methode können wir einen beliebigen Schlüssel (String) in Form eines JavaScript-Objekts-Werts in den Cache legen. Die Methode cache.put("hello","world");

put() gibt den Wert zurück, den wir in den Cache gelegt haben.

get(): Die Methode get() ermöglicht uns den Zugriff auf den Cache-Wert, der einem Schlüssel entspricht. Wenn der Schlüssel gefunden wird, gibt er seinen Wert zurück; wenn nicht, gibt er undefiniert zurück. cache.get("hello");

remove(): Die Funktion „remove()“ wird verwendet, um ein Schlüssel-Wert-Paar aus dem Cache zu entfernen, wenn es gefunden wird. Wenn es nicht gefunden wird, wird undefiniert zurückgegeben. cache.remove("hello");

removeAll(): Die Funktion „removeAll()“ wird verwendet, um den Cache zurückzusetzen und alle zwischengespeicherten Werte zu entfernen.

destory(): Die Methode destory() wird verwendet, um alle Verweise auf den angegebenen Cache aus der $cacheFactory-Cache-Registrierung zu entfernen.

3. Cache in $http

Der $http-Dienst von Angular erstellt einen Cache mit der ID $http. Es ist einfach, bei $http-Anfragen das Standard-Cache-Objekt zu verwenden: Mit der Methode $http() können wir ihr einen Cache-Parameter übergeben.

3.1 Standard-$http-Cache

Der standardmäßige $http-Cache ist besonders nützlich, wenn sich die Daten nicht häufig ändern. Sie können es so einstellen:

$http({
  method: 'GET',
  url: '/api/users.json',
  cache: true　　//设置为true只是用来使用$http默认的缓存机制
});

Jetzt wird jede Anfrage über $http an die URL /api/user.json im Standard-$http-Cache gespeichert. Der Anforderungsschlüssel in diesem $http-Cache ist der vollständige URL-Pfad.

Bei Bedarf können Sie diesen Standard-$http-Cache auch betreiben (wenn wir beispielsweise eine weitere nicht zwischengespeicherte Anfrage initiieren, um uns an inkrementelle Änderungen zu erinnern, können wir ihn in dieser Anfrage in der Standard-$http-Anfrage löschen).

Um auf die Standardanforderung für $http zu verweisen, rufen Sie einfach den Cache über $cacheFactory() mit der ID ab:

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

Wenn der Cache unter Kontrolle ist, können wir bei Bedarf die gesamte Arbeit erledigen. Normal Vorgänge wie das Abrufen einer zwischengespeicherten Antwort, das Löschen des Eintrags aus dem Cache oder das Entfernen aller zwischengespeicherten Referenzen.

// 获取上一次请求的缓存
var usersCache = cache.get('http://example.com/api.users.json');
// 删除上一次请求的缓存入口
cache.remove('http://example.com/api.users.json');
// 重新开始并移除全部缓存
cache.removeAll();

rrree

3.2 Benutzerdefinierter Cache

Manchmal ist es möglich, mehr Kontrolle über den Cache zu haben und Regeln für die Cache-Leistung zu erstellen, was die Erstellung eines neuen Caches erfordert Anfrage.

Es ist einfach, $http-Anfragen über einen benutzerdefinierten Cache zu stellen. Anstatt der Anfrage einen booleschen Parameter „true“ zu übergeben, können Sie die Cache-Instanz übergeben.

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数据库步骤详解

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsfälle für benutzerdefinierten AngularJS-Cache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!