Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-05-30 17:30:49
original
1427 Les gens l'ont consulté

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;  
}
Copier après la connexion

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;
}
Copier après la connexion

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;
    }
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!