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文件中，当首次请求时，不仅要判断是否有缓存数据，还要检测现在时间与缓存时间相差值是否在指定的范围内，如果是在指定时长范围内，则直接调用已缓存的数据，否则，将再次发送数据请求，请求成功后，不仅要缓存响应数据，还要缓存数据缓存时的时间戳，用于再次请求时，检测有效的时长。

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