页面渲染旧数据的过程

环境以及问题描述

• uniapp
• vue2
• 二次开发

A 页面

<v-link
  :to="{
    path: '/pages/assets/bill',
    query: { name: item.name },
  }"
  v-for="(item, index) in list"
  :key="index"
 >

B 页面

通过上个页面传送过来的 query 发起网络请求数据，并渲染界面

onLoad(query) {
  this.query=query
  this.getInfo();
},

但是页面并没有渲染请求到的最新数据，需要下拉刷新一次才能是最新的数据

第二次进入 B 页面，渲染的是老数据

排查过程

1. 查看浏览器网络 tag，是否发起了请求，是
2. 是否页面没有刷新，通过 this.$forceUpdate() ，无效
3. 打印请求结果

    getInfo() {
      发起请求(this.query).then((res) => {
        this.detail = res.data;
        console.log(res)
      });
    }

发现打印结果和浏览器 tag 请求返回的结果不一样

查看封装网络请求的文件

return new Promise((resolve, reject) => {
  let reg=new RegExp('/','g')//g代表全部
  let newMsg=options.url.replace(reg,'_');
  if(Cache.get(newMsg).data){
    resolve(Cache.get(newMsg).data);
    uni.request({/* 发起请求的封装*/})

发现有缓存操作

流程：

将请求 url 中的 / 换成 _ 作为 key 缓存起来。双重缓存，一个自己 new 的 Map 结构，以及 uni.storage

遇到发起网络请求：读取旧数据返回，发起新的请求

我不明白这是在干什么

B 页面中发起请求的url都是一样的，就是 query 中的参数会不一样，所以每次进入 B 读取到的都是旧数据

虽然返回了数据，但是还是会发起新的网络请求，所以会造成每次都发起了请求，但是打印结果和在浏览器看到的不一样

处理

将 query 作为 key 的一部分

		// 检查 options.data 是否存在
		if (options.data && Object.keys(options.data).length > 0) {
			// 将对象转换为 JSON 字符串
			let dataStr = JSON.stringify(options.data);
			newMsg += dataStr;
		}

能够解决问题

但是相同 url 和 query 属性多还是会存在问题，因此添加了一个是否读取缓存的选项

后续打算将这种类型的网络请求的缓存去除掉