Comment faire fonctionner le cache AngularJS

Cette fois, je vais vous montrer comment faire fonctionner le cache angulaire js et quelles sont les précautions à prendre pour faire fonctionner le cache angulaire js. Ce qui suit est un cas pratique, jetons un coup d'oeil.

1. Qu'est-ce qu'un cache

Un cache est un composant qui peut stocker des données de manière transparente afin qu'elles puissent être servies plus rapidement à l'avenir. demander.

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

2. Mise en cache dans Angular

2.1 Introduction à $cacheFactory

$cacheFactory est un Un service qui génère des objets de cache pour tous les services Angular. En interne, $cacheFactory crée un objet cache par défaut, même si nous n'en créons pas explicitement un.

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

var cache = $cacheFactory('myCache');
Cette méthode $cacheFactory peut acceptez 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'une valeur d'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 ; sinon, 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 en sorte que les requêtes $http utilisent 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 des modifications incrémentielles, nous pouvons l'effacer dans la requête $http par défaut de cette requête).

Afin de référencer la requête par défaut de $http, il suffit d'utiliser l'ID pour récupérer le cache via $cacheFactory() :

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

Pour le cache sous contrôle, on peut le faire en cas de besoin Toutes les opérations normales, telles que la récupération d'une réponse mise en cache, la suppression de l'entrée du cache ou la suppression de toutes les références mises en cache.

// 获取上一次请求的缓存
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);　　//往缓存中放入数据
          console.log(data);
        }
      );
    }

3.2 Mise en cache personnalisée

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éfinir un service de cache, injection de dépendances dans le contrôleur que vous souhaitez utiliser, utilisez-le 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
        })
      }

Maintenant, $http sera utilisé Cache personnalisé au lieu du cache par défaut.

4. Définissez le cache par défaut pour $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中文网其它相关文章！

推荐阅读：

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

如何使用webpack+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!