前言
目前页面不稳定存在的问题？
切换不同模块，有一个模块叫“综述”，时显示时不显示，不太稳定。
下面我们分析为什么会存在该问题。
为什么会出现此问题？
-
因为该“综述”模块是用乾坤引用，初步怀疑是乾坤生命周期，页面已经加装完毕，而乾坤模块尚未加装完，排查之后或许不是（×）；
-
“综述”模块有时候不显示，在想可能是DOM节点还没有请求到，因为初始化很多模块资源加载真的很多，所以在mounted生命周期请求接口的时候写进
this.$nextTick(() => {this.getData()}，加了之后确实是减少问题出现的情况 -
接着怀疑是异步加装，接口排查，结果发现该乾坤子应用接口一直在等待（数据库一直卡死），所以这就是页面不显示的原因，有时候接口就很快请求完，页面就出来，这就是问题所在。
如何优化这类问题？
-
因为该接口数据一天才会更新一次，所以前端将第一次请求的数据缓存起来（sessionStorage），后续切换模块则使用缓存，不需要请求接口，减少卡死现象。每三小时则又会删除sssionStorage，防止数据未更新
-
axios设置60s请求超时，若60s还没有请求完毕，前端显示暂无数据
axios.defaults.timeout = 60 * 1000 -
后端也加缓存机制。
以上三种方法均可解决问题。
代码如下：
methods: {
getList() {
// 判断是否走缓存
if (sessionStorage.getItem('zs_resourcegalleryquery1') !== null) {
this.tableList = JSON.parse(
sessionStorage.getItem('zs_resourcegalleryquery1')
)
return
}
let params = {
type: 1
}
this.axios
.get(this.$urls.mwwdSvc + 'water/resource/gallery/query', { params })
.then(res => {
if (res.data.data) {
this.setData(res.data.data)
sessionStorage.setItem(
'zs_resourcegalleryquery1',
JSON.stringify(res.data.data)
)
} else {
this.setData()
}
})
.catch(e => {
this.setData()
})
}
知识点
知识点：乾坤、sessionStorage缓存、nextTick 当数据更新了，在dom中渲染后，自动执行该函数
以上主要抛出问题并提供思路分析。
以往推荐
vue-typescript-admin-template后台管理系统
