Eine Angular-Cache-Annotation auf Methodenebene (Dekorator)

In diesem Artikel wird hauptsächlich eine Cache-Anmerkung auf Angular-Methodenebene (Dekorator) vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

Mit Dekoratoren in es6 können Sie viele Dinge tun. Heute werde ich eine Funktion zur Verwendung von Dekoratoren zum Zwischenspeichern von Methodenaufrufen in Angular vorstellen.

Das Anwendungsszenario sieht folgendermaßen aus: In der Front-End-Arbeit gibt es einige häufig verwendete Methoden, die jedoch bei jedem Aufruf viele Ressourcen beanspruchen, z. B. Datenstatistikfunktionen usw. Im Allgemeinen unterscheiden sich die zurückgegebenen Ergebnisse je nach den im Funktionsaufruf übergebenen Parametern.

Da ich die Cache-Funktion im Frühling verwendet habe, wäre es meiner Meinung nach schön, wenn es in es zwischenspeicherbare Anmerkungen für den Frühling gäbe. Die Anmerkungen im Frühling werden wie folgt verwendet:

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

Die Cache-Zeit im Frühjahr ist in der Konfigurationsdatei konfiguriert, aber am Frontend müssen wir im Allgemeinen unterschiedliche Cache-Zeiten für verschiedene Funktionen festlegen
Daher müssen wir den entsprechenden Cache angeben jedes Mal

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

Also habe ich eine Cache-Anmerkung erstellt, die die Rückgabe von Promise-Objekten unterstützt

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

Das Obige habe ich für alle zusammengestellt. Ja, ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

So führen Sie ein Symbolsymbol in ein Vue-Projekt ein

Überprüfung des E-Mail-Adressformats in JavaScript

Einführung in Time-Sharing-Funktionen zur Javascript-Leistungsoptimierung

Das obige ist der detaillierte Inhalt vonEine Angular-Cache-Annotation auf Methodenebene (Dekorator). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!