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

前端API请求缓存方案

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

然后我们定义该数据缓存。我们采用Map 基本相同的api

  1. class ExpriesCache {  
  2. // 定义静态数据map来作为缓存池  
  3. static cacheMap = new Map()  
  4. // 数据是否超时  
  5. static isOverTime(name) {  
  6. const data = ExpriesCache.cacheMap.get(name)  
  7. // 没有数据 一定超时  
  8. if (!data) return true  
  9. // 获取系统当前时间戳  
  10. const currentTime = (new Date()).getTime()  
  11. // 获取当前时间与存储时间的过去的秒数  
  12. const overTime = (currentTime - data.cacheTime) / 1000  
  13. // 如果过去的秒数大于当前的超时时间,也返回null让其去服务端取数据  
  14. if (Math.abs(overTime) > data.timeout) {  
  15. // 此代码可以没有,不会出现问题,但是如果有此代码,再次进入该方法就可以减少判断。  
  16. ExpriesCache.cacheMap.delete(name)  
  17. return true  
  18. }  
  19. // 不超时  
  20. return false  
  21. }  
  22. // 当前data在 cache 中是否超时  
  23. static has(name) {  
  24. return !ExpriesCache.isOverTime(name)  
  25. }  
  26. // 删除 cache 中的 data  
  27. static delete(name) {  
  28. return ExpriesCache.cacheMap.delete(name)  
  29. }  
  30. // 获取  
  31. static get(name) {  
  32. const isDataOverTiem = ExpriesCache.isOverTime(name)  
  33. //如果 数据超时,返回null,但是没有超时,返回数据,而不是 ItemCache 对象  
  34. return isDataOverTiem ? null : ExpriesCache.cacheMap.get(name).data  
  35. }  
  36. // 默认存储20分钟  
  37. static set(name, data, timeout = 1200) {  
  38. // 设置 itemCache  
  39. const itemCache = mew ItemCache(data, timeout)  
  40. //缓存  
  41. ExpriesCache.cacheMap.set(name, itemCache)  
  42. }  
  43. }  

(编辑:西安站长网)

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

热点阅读