溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用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的注解。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
