使用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;
//把緩存時的時間和當前的時間進行對比，如果沒有超時，則直接返回
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)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
