Detaillierte Erklärung des AngularJS-Cache

Dieses Mal werde ich Ihnen das Caching von AngularJS und die Vorsichtsmaßnahmen bei der Verwendung von AngularJS-Caching ausführlich erläutern. 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 zukünftige Anfragen schneller bearbeitet werden können.

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

2. Cache in Angular

2.1 Einführung in $cacheFactory

$cacheFactory ist ein Cache, der Cache für alle generiert Angular Services Objektdienste. 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');

Die Methode $cacheFactory kann zwei Parameter akzeptieren:

cacheId ( String): Diese Cache-ID 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 er nicht gefunden wird, 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, $http-Anfragen über das Standard-Cache--Objekt zu erstellen: Mit der Methode $http() können wir ihm 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 auch diesen standardmäßigen $http-Cache verwenden (wenn wir beispielsweise eine weitere nicht zwischengespeicherte Anfrage initiieren, um uns daran zu erinnern, dass inkrementelle Änderungen aufgetreten sind, können wir die standardmäßige $http-Cache-Anfrage verwenden). Löschen Sie diese Anfrage).

 cache = $cacheFactory('$http' 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 Benutzerdefinierter Cache

Manchmal können Sie mehr Kontrolle über den Cache haben und Regeln für die Cache-Leistung erstellen, wozu die Erstellung eines neuen Caches erforderlich ist Verwenden Sie $http-Anfragen.

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

Eine kleine Demo: Definieren Sie einen Cache-Dienst, Abhängigkeitsinjektion in den Controller, den Sie verwenden möchten, verwenden Sie direkt

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

Jetzt verwendet $http einen benutzerdefinierten Cache anstelle des Standardcaches.

4. Legen Sie den Standard-Cache für $http fest

Es ist nicht praktisch, jedes Mal eine Cache-Instanz zu übergeben, wenn wir eine $http-Anfrage initiieren möchten, insbesondere wenn dies der Fall ist wenn für jede Anfrage derselbe Cache verwendet wird.

其实可以在模块的 .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中文网其它相关文章！

推荐阅读：

知名的网站前端布局分析

在前端中的html基础知识 
vue插件实现移动端轮播图

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des AngularJS-Cache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!