Vue前端开发-缓存优化

虽然缓存数据有利用减轻服务端的频繁请求,优化用户的数据请求体验,但如果一直使用缓存的数据,会使信息过于陈旧,无法满足数据即时性的需求,为了解决这个问题,需要对缓存做使用时间的优化。

所谓"缓存使用时间"是指缓存存储后,在页面中的使用时间,如果不做优化,它是无限性的,除非人为删除,优化时,可以根据这个缓存的数据内容,设置不同过期时长,通常情况下,非时效性很强的数据,过期时长为30分钟,其它为10分钟左右。

接下来,演示实例【9-2】请求获取的数据缓存优化的过程。

实例9-3 缓存优化

1. 功能描述

在实例【9-2】的基础之上,点击"缓存数据"按钮时,先向服务器发送异步请求,获取响应数据后,缓存在本地,当再次点击该按钮时,如果发现有指定名称的缓存数据并在指定时长内,则直接调用缓存,否则,再次发送请求获取数据。

2. 实现代码

为了实现数据请求成功后,缓存数据的功能,先打开路径为components/ch9/ 中的BaseRequest文件,修改后代码如代码清单9-7所示的。

代码清单9-7 BaseRequest.vue代码

typescript 复制代码
<template>
    /* 模板见示例【9-2】*/
</template>
<script>
export default {
    data() {
        return {
            data: ""
        }
    },
    methods: {
        ...其他方法见实例【9-1】
        onRequest() {
            this.$http.get('/?day=1-1').then(d => {
                this.data = d.data
                // 请求成功后,再缓存返回数据
                localStorage.setItem("cacheBase", d.data)
                // 缓存数据保存时的时间
                localStorage.setItem("cacheTime", 
	(new Date().getTime()));
            }, err => {
                console.log(err.message)
            })
        },
        onDiffTime(oTime, nTime, len) {
            let _oM = parseInt(oTime / 1000 / 60);
            let _nM = parseInt(nTime / 1000 / 60);
            if (_nM - _oM <= len) {
                return true
            } else {
                return false;
            }
        },
        onCacheRequest() {
            this.data = "loading...";
            // 先判断是否有缓存数据
            if (localStorage.getItem("cacheBase") && 
localStorage.getItem("cacheTime")) {
                // 判断时间否是规则内
                if (this.onDiffTime(
localStorage.getItem("cacheTime"), 
(new Date()).getTime(), 3)) {
                    this.data = 
localStorage.getItem("cacheBase");
                } else {
                    this.onRequest();
                }
            } else {
                this.onRequest();
            }
        }
    }
}
</script>
<style>
/* 样式见示例【9-1】*/
</style>

3. 页面效果

保存代码后,页面在Chrome浏览器下执行的页面效果如图9-8所示。

4. 源码分析

在本示例组件BaseRequest.vue文件中,当首次请求时,不仅要判断是否有缓存数据,还要检测现在时间与缓存时间相差值是否在指定的范围内,如果是在指定时长范围内,则直接调用已缓存的数据,否则,将再次发送数据请求,请求成功后,不仅要缓存响应数据,还要缓存数据缓存时的时间戳,用于再次请求时,检测有效的时长。

需要说明的是:由于发送请求和计算两个时间戳的差属于单独的一个功能,并且发送请求的功能可能会被调用多次,因此,可以将它们都封装成为一个独立的函数形式,这样既利于代码后续的维护,又便于代码的复用并简化代码的结构。

相关推荐
liangshanbo121531 分钟前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15883 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_3 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD3 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
要加油哦~4 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
哆啦A梦15884 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫4 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo4 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li5 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐5 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine