使用es6中裝裝飾器能做很多事情,今天分享一種在angular使用裝飾器進行方法調(diào)用緩存的功能。
應用場景是這樣的,在前端工作中,會有一些經(jīng)常使用的方法經(jīng)常被調(diào)用,但是這些方法每次調(diào)用都會占用很多的資源,比如網(wǎng)絡請求,數(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ù)設置不同的緩存時間
因此 需要每次指定相應的緩存時間
@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; //把緩存時的時間和當前的時間進行對比,如果沒有超時,則直接返回 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; } }
上面是我整理給大家的,希望今后會對大家有幫助。
相關文章:
Vue項目中如何引入icon圖標
JavaScript中的E-mail 地址格式驗證
javascript性能優(yōu)化之分時函數(shù)的介紹
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com