Une annotation de cache au niveau de la méthode angulaire (décorateur)

Cet article présente principalement une annotation de cache au niveau de la méthode Angular (décorateur). Maintenant, je la partage avec vous et la donne comme référence.

Vous pouvez faire beaucoup de choses en utilisant des décorateurs dans es6. Aujourd'hui, je vais partager une fonction d'utilisation de décorateurs pour mettre en cache les appels de méthode en angulaire.

Le scénario d'application est le suivant. Dans le travail front-end, certaines méthodes fréquemment utilisées sont souvent appelées, mais ces méthodes consomment beaucoup de ressources à chaque fois qu'elles sont appelées, comme les requêtes réseau, fonctions de statistiques de données, etc. Généralement, les résultats renvoyés seront différents en fonction des paramètres passés dans l'appel de fonction.

Parce que j'ai utilisé la fonction cache au printemps, je pense que ce serait génial s'il y avait des annotations pouvant être mises en cache au printemps dans es. Les annotations au printemps sont utilisées comme suit :

@Cacheable(value="'accountCache_'+#userName")// 缓存名叫 accountCache_USERNAME  
public Account getAccountByName(String userName) {  
// @@@@
return acount;  
}

Le temps de cache au printemps est configuré dans le fichier de configuration, mais sur le front-end, nous devons généralement définir différents temps de cache pour différentes fonctions
Nous devons donc spécifier le correspondant temps de cache à chaque fois

@cacheable(111)
getSecondLeftMenu(topMenuId: number){
return 1111;
}

J'ai donc créé une annotation de cache qui prend en charge le retour des objets Promise

export function cacheable(timeout:number) {
  return function (target: any, key: string, descriptor: any) {
     const originalMethod = descriptor.value;
     descriptor.value = function (...args: any[]) {
//把传入的参数和被调的函数名一起组成存储的主键
       const paramStr = args.map(a => JSON.stringify(a)).join();
       const keyStr=key+"start$$"+(paramStr||"")+"-$$end";
       let resultStr=localStorage.getItem(keyStr);
       if (!!resultStr) {
         let resultValue=JSON.parse(resultStr);
          let now=new Date() as any;
//把缓存时的时间和当前的时间进行对比，如果没有超时，则直接返回
          let old2=(new Date(resultValue.date)) as any;
          let delt=now - old2;
          if (delt<(timeout*1000)) {
            return Promise.resolve(resultValue.value);
          }
       }
//超时时，调用原方法，并记录返回结果，这里我们的返回均是promise对象
       var result = originalMethod.apply(this, args);
       result.then(data=>{
        let dd={
          date:new Date(),
          value:data
        }
        localStorage.setItem(keyStr,JSON.stringify(dd))
        return Promise.resolve(data);
       },data=>{
        return Promise.reject(data);
       })
       return result;
     }
     return descriptor;
    }
}

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment introduire l'icône d'icône dans le projet Vue

Vérification du format d'adresse e-mail en JavaScript

Introduction aux fonctions de partage de temps pour l'optimisation des performances javascript

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!