一種angular的方法級的緩存注解(裝飾器)

使用es6中裝裝飾器能做很多事情,今天分享一種在angular使用裝飾器進行方法調(diào)用緩存的功能。

成都創(chuàng)新互聯(lián)專注于蔚縣企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計,商城網(wǎng)站制作。蔚縣網(wǎng)站建設(shè)公司,為蔚縣等地區(qū)提供建站服務(wù)。全流程按需制作網(wǎng)站,專業(yè)設(shè)計,全程項目跟蹤,成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

應(yīng)用場景是這樣的,在前端工作中,會有一些經(jīng)常使用的方法經(jīng)常被調(diào)用,但是這些方法每次調(diào)用都會占用很多的資源,比如網(wǎng)絡(luò)請求,數(shù)據(jù)統(tǒng)計功能,這些方法一般會隨著函數(shù)調(diào)用傳參的不同返回的結(jié)果不同。

因為使用過spring中的cache功能,感覺es中如果有spring cacheable注解就好了,在spring中注解使用如下:

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

spring中的緩存時間是在配置文件中配置的,但是在前端一般我們需要針對不同的函數(shù)設(shè)置不同的緩存時間
因此 需要每次指定相應(yīng)的緩存時間

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

于是我搞了一個支持 返回是Promise對象的緩存注解

export function cacheable(timeout:number) {
  return function (target: any, key: string, descriptor: any) {
     const originalMethod = descriptor.value;
     descriptor.value = function (...args: any[]) {
//把傳入的參數(shù)和被調(diào)的函數(shù)名一起組成存儲的主鍵
       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;
//把緩存時的時間和當(dāng)前的時間進行對比,如果沒有超時,則直接返回
          let old2=(new Date(resultValue.date)) as any;
          let delt=now - old2;
          if (delt<(timeout*1000)) {
            return Promise.resolve(resultValue.value);
          }
       }
//超時時,調(diào)用原方法,并記錄返回結(jié)果,這里我們的返回均是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;
    }
}

上述的代碼中,我們重點實現(xiàn)了返回值是Promise對象的函數(shù),因為在前端工作中,最占用資源和需要緩存的是網(wǎng)絡(luò)請求,而且也極易影響用戶的體驗,因此我們重點關(guān)心了返回值是Promise的注解。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。

分享名稱:一種angular的方法級的緩存注解(裝飾器)
轉(zhuǎn)載來源:http://bm7419.com/article14/igsoge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序小程序開發(fā)、手機網(wǎng)站建設(shè)、微信公眾號、商城網(wǎng)站、品牌網(wǎng)站制作

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名