使用es6中装装饰器能做很多事情,今天分享一种在角使用装饰器进行方法调用缓存的功能。
应用场景是这样的,在前端工作中,会有一些经常使用的方法经常被调用,但是这些方法每次调用都会占用很多的资源,比如网络请求,数据统计功能,这些方法一般会随着函数调用传参的不同返回的结果不同。
因为使用过春天中缓存的功能,感觉es中如果有春天缓存注解就好了,在春天中注解使用如下:
@Cacheable (value=" accountCache_ + #用户名”)//缓存名叫accountCache_USERNAME
公共账户getAccountByName(字符串的用户名){//@@@@
返回计算;
}
之前
中春天的缓存时间是在配置文件中配置的,但是在前端一般我们需要针对不同的函数设置不同的缓存时间
因此需要每次指定相应的缓存时间
@cacheable (111)
getSecondLeftMenu (topMenuId:数字){
返回1111;
}
之前
于是我搞了一个支持返回是承诺对象的缓存注解
导出功能缓存(超时:数字){
返回函数(目标:任何,关键:字符串描述符:有){
const originalMethod=descriptor.value;
描述符。值=https://www.yisu.com/zixun/function (…参数:任何[]){//把传入的参数和被调的函数名一起组成存储的主键
const paramStr=参数。地图(=> JSON.stringify (a)) . join ();
const keyStr=键+“$ $”+ (paramStr | | " ") +“- $ $结束”;
让resultStr=localStorage.getItem (keyStr);
如果(! ! resultStr) {
让resultValue=https://www.yisu.com/zixun/JSON.parse (resultStr);
我们现在=新的日期()一样;//把缓存时的时间和当前的时间进行对比,如果没有超时,则直接返回
让old2=(新日期(resultValue.date)一样;
我们现在解决=- old2;
如果(解决<(超时* 1000)){
返回Promise.resolve (resultValue.value);
}
}//超时时,调用原方法,并记录返回结果,这里我们的返回均是承诺对象
var=originalMethod结果。应用(这个,args);
result.then(数据=> {
让弟弟={
新日期:日期(),
价值:数据
}
localStorage.setItem (keyStr JSON.stringify (dd))
返回Promise.resolve(数据);=>{},数据
返回Promise.reject(数据);
}）
返回结果;
}
返回描述符;
}
}
上述的代码中,我们重点实现了返回值是承诺对象的函数,因为在前端工作中,最占用资源和需要缓存的是网络请求,而且也极易影响用户的体验,因此我们重点关心了返回值是承诺的注解。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
