加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

详解前端API请求缓存方案

发布时间:2019-04-25 11:20:16 所属栏目:建站 来源:jump--jump
导读:在开发 web 应用程序时,性能都是必不可少的话题。对于webpack打包的单页面应用程序而言,我们可以采用很多方式来对性能进行优化,比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。甚至在vue-cli 项目中我们可以使用 --modern

此时 我们就会使用 类来对api进行缓存。

  1. class Api {  
  2. // 缓存10s  
  3. @ApiCache(10)  
  4. // 此时不要使用默认值,因为当前 修饰器 取不到  
  5. getWare(params1, params2) {  
  6. return request.get('/getWares')  
  7. }  
  8. }  

因为函数存在函数提升,所以没有办法利用函数来做 修饰器。

例如:

  1. var counter = 0;  
  2. var add = function () {  
  3. counter++;  
  4. };  
  5. @add  
  6. function foo() {  
  7. }  

该代码意图是执行后counter等于 1,但是实际上结果是counter等于 0。因为函数提升,使得实际执行的代码是下面这样:

  1. @add  
  2. function foo() {  
  3. }  
  4. var counter;  
  5. var add;  
  6. counter = 0;  
  7. add = function () {  
  8. counter++;  
  9. };  

所以没有 办法在函数上用修饰器。具体参考ECMAScript 6 入门 Decorator。

此方式写法简单且对业务层没有太多影响。但是不可以动态修改 缓存时间。

调用方式:

  1. getWares(1,2).then( ... )  
  2. // 第二次调用 取得先前的promise  
  3. getWares(1,2).then( ... )  
  4. // 不同的参数,不取先前promise  
  5. getWares(1,3).then( ... )  

总结

api的缓存机制与场景在这里也基本上介绍了,基本上能够完成绝大多数的数据业务缓存,在这里我也想请教教大家,有没有什么更好的解决方案,或者这篇博客中有什么不对的地方,欢迎指正,在这里感谢各位了。

同时这里也有很多没有做完的工作,可能会在后面的博客中继续完善。

【责任编辑:庞桂玉 TEL:(010)68476606】
点赞 0

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读