So bedienen Sie den AngularJS-Cache

Dieses Mal zeige ich Ihnen, wie Sie den AngularJS-Cache bedienen und welche Vorsichtsmaßnahmen für den Betrieb des AngularJS-Cache gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 nicht explizit eines 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(): Die Methode put() ermöglicht es uns, einen beliebigen Schlüssel (String) in Form eines JavaScript-Objektwerts in den Cache zu 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 der Standard-$http-Anfrage dieser 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();

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 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);
        }
      );
    }

Eine kleine Demo: Definieren Sie einen Cache-Dienst, fügen Sie Abhängigkeiten in den Controller ein, den Sie verwenden möchten, und verwenden Sie ihn direkt

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'); //自定义一个缓存服务
  }])
});

Jetzt verwendet $http den benutzerdefinierten Cache anstelle des Standardcaches.

4. Legen Sie den Standardcache für $http fest

每次我们想要发起一个 $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中文网其它相关文章！

推荐阅读：

jquery+fullpage添加界面内的头部与版权

如何使用webpack+vue环境局域网

Das obige ist der detaillierte Inhalt vonSo bedienen Sie den AngularJS-Cache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!