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

前端API请求缓存方案

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

此时 我们就会使用 类来对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

(编辑:源码门户网)

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