一种angular的方法级的缓存注解（装饰器）
使用es6中装装饰器能做很多事情，今天分享一种在angular使用装饰器进行方法调用缓存的功能。
应用场景是这样的，在前端工作中，会有一些经常使用的方法经常被调用，但是这些方法每次调用都会占用很多的资源，比如网络请求，数据统计功能，这些方法一般会随着函数调用传参的不同返回的结果不同。
因为使用过spring中的cache功能，感觉es中如果有springcacheable注解就好了，在spring中注解使用如下：
@Cacheable(value="'accountCache_'+#userName")//缓存名叫accountCache_USERNAME
publicAccountgetAccountByName(StringuserName){
//@@@@
returnacount;
}
spring中的缓存时间是在配置文件中配置的，但是在前端一般我们需要针对不同的函数设置不同的缓存时间
因此需要每次指定相应的缓存时间
@cacheable(111)
getSecondLeftMenu(topMenuId:number){
return1111;
}
于是我搞了一个支持返回是Promise对象的缓存注解
exportfunctioncacheable(timeout:number){
returnfunction(target:any,key:string,descriptor:any){
constoriginalMethod=descriptor.value;
descriptor.value=function(...args:any[]){
//把传入的参数和被调的函数名一起组成存储的主键
constparamStr=args.map(a=>JSON.stringify(a)).join();
constkeyStr=key+"start$$"+(paramStr||"")+"-$$end";
letresultStr=localStorage.getItem(keyStr);
if(!!resultStr){
letresultValue=JSON.parse(resultStr);
letnow=newDate()asany;
//把缓存时的时间和当前的时间进行对比，如果没有超时，则直接返回
letold2=(newDate(resultValue.date))asany;
letdelt=now-old2;
if(delt<(timeout*1000)){
returnPromise.resolve(resultValue.value);
}
}
//超时时，调用原方法，并记录返回结果，这里我们的返回均是promise对象
varresult=originalMethod.apply(this,args);
result.then(data=>{
letdd={
date:newDate(),
value:data
}
localStorage.setItem(keyStr,JSON.stringify(dd))
returnPromise.resolve(data);
},data=>{
returnPromise.reject(data);
})
returnresult;
}
returndescriptor;
}
}
上述的代码中，我们重点实现了返回值是Promise对象的函数，因为在前端工作中，最占用资源和需要缓存的是网络请求，而且也极易影响用户的体验，因此我们重点关心了返回值是Promise的注解。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。