Explication détaillée du cache angulairejs

Cette fois, je vais vous apporter une explication détaillée de la mise en cache de angularjs et quelles sont les précautions lors de l'utilisation de la mise en cache d'angularjs. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. Qu'est-ce qu'un cache

Un cache est un composant qui peut stocker des données de manière transparente afin que les futures demandes puissent être traitées plus rapidement.

Plus le cache peut répondre à de requêtes, plus les performances globales du système s'améliorent.

2. Cache dans Angular

2.1 Introduction à $cacheFactory

$cacheFactory est un cache qui génère du cache pour tous Services angulaires Services d'objets. En interne, $cacheFactory crée un objet cache par défaut, même si nous ne le créons pas explicitement.

Pour créer un objet cache, vous pouvez utiliser $cacheFactory pour créer un cache par un ID :

var cache = $cacheFactory('myCache');

La méthode $cacheFactory peut accepter deux paramètres :

cacheId ( String) : Ce cacheId est le nom de l'ID lors de la création du cache. Il peut être référencé en utilisant le nom du cache via la méthode get().

capacité : cette capacité décrit le nombre maximum de paires clé-valeur du cache à stocker et à sauvegarder à l'aide du cache à un moment donné.

2.2 Objet cache

L'objet cache lui-même possède les méthodes suivantes qui peuvent être utilisées pour interagir avec le cache.
info() : La méthode info() renvoie l'ID, la taille et les options de l'objet cache.
put() : La méthode put() nous permet de mettre n'importe quelle clé (chaîne) sous la forme d'un objet JavaScript dans le cache. La méthode cache.put("hello","world");
put() renverra la valeur que nous avons mise dans le cache.
get() : La méthode get() nous permet d'accéder à la valeur du cache correspondant à une clé. Si la clé est trouvée, elle renvoie sa valeur ; si elle n'est pas trouvée, elle renvoie undefined . cache.get("hello");
remove() : La fonction remove() est utilisée pour supprimer une paire clé-valeur du cache si elle est trouvée. S'il n'est pas trouvé, il renvoie undefined . cache.remove("hello");
removeAll() : La fonction removeAll() est utilisée pour réinitialiser le cache et supprimer toutes les valeurs mises en cache.
destory() : La méthode destory() est utilisée pour supprimer toutes les références au cache spécifié du registre de cache $cacheFactory.

3. Cache dans $http

Le service $http d'Angular crée un cache avec l'ID $http. Faire des requêtes $http utiliser l'objet cache par défaut est simple : la méthode $http() nous permet de lui passer un paramètre de cache.

3.1 Cache $http par défaut
Le cache $http par défaut est particulièrement utile lorsque les données ne changent pas fréquemment. Vous pouvez le définir comme ceci :

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

Maintenant, chaque requête via $http vers l'URL /api/user.json sera stockée dans le cache $http par défaut. La clé de requête dans ce cache $http est le chemin complet de l'URL.

Si nécessaire, vous pouvez également utiliser ce cache $http par défaut (par exemple, si nous lançons une autre requête non mise en cache pour nous rappeler que des modifications incrémentielles ont eu lieu, nous pouvons utiliser la requête de cache $http par défaut pour effacer cette demande).

 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 Cache personnalisé

Parfois, vous pouvez avoir plus de contrôle sur le cache et créer des règles pour les performances du cache, ce qui nécessite la création d'un nouveau cache pour utilisez les requêtes $http.

Il est facile de faire des requêtes $http via un cache personnalisé. Au lieu de transmettre un paramètre booléen true à la requête, vous pouvez transmettre l'instance de cache.

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

Une petite démo : définissez un service de cache, injection de dépendances dans le contrôleur que vous souhaitez utiliser, utilisez directement

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 utilisera désormais un cache personnalisé au lieu du cache par défaut.

4. Définir le cache par défaut pour $http

Il n'est pas pratique de lui transmettre une instance de cache à chaque fois que nous voulons lancer une requête $http, surtout si lorsque vous utilisez le même cache pour chaque requête.

其实可以在模块的 .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插件实现移动端轮播图

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!