使用es6中裝裝飾器能做很多事情，今天分享一種在angular使用裝飾器進行方法調用緩存的功能。
應用場景是這樣的，在前端工作中，會有一些經常使用的方法經常被調用，但是這些方法每次調用都會占用很多的資源，比如網絡請求，數據統計功能，這些方法一般會隨著函數調用傳參的不同返回的結果不同。
因為使用過spring中的cache功能，感覺es中如果有spring cacheable注解就好了，在spring中注解使用如下：
@Cacheable(value="'accountCache_'+#userName")// 緩存名叫 accountCache_USERNAME public Account getAccountByName(String userName) { // @@@@return acount; } spring中的緩存時間是在配置文件中配置的，但是在前端一般我們需要針對不同的函數設置不同的緩存時間
因此 需要每次指定相應的緩存時間
@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[]) {//把傳入的參數和被調的函數名一起組成存儲的主鍵 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; }}上述的代碼中，我們重點實現了返回值是Promise對象的函數，因為在前端工作中，最占用資源和需要緩存的是網絡請求，而且也極易影響用戶的體驗，因此我們重點關心了返回值是Promise的注解。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
