Uniapp 页面返回不刷新?两种方法防止 onShow 触发多次请求!

目录

  • 前言
  • [1. 变量(不生效)](#1. 变量(不生效))
  • [2. 延迟(生效)](#2. 延迟(生效))

前言

🤟 找工作,来万码优才:👉 #小程序://万码优才/r6rqmzDaXpYkJZF

在 Uniapp 中,使用 onShow() 钩子来监听页面显示,从而在页面返回时刷新数据

例如:

js 复制代码
onShow() {
  this.getLastSubmission(); // 重新请求数据
}

但这样会导致 初次进入页面 时 onShow() 也会执行一次 getLastSubmission(),而 onLoad() 也会调用它,导致 多次请求,带来性能问题和不必要的 API 调用

初次进入时 只调用一次 getLastSubmission(),返回页面时也只会调用 getLastSubmission() 以刷新数据
避免 onShow 和 onLoad 同时触发 getLastSubmission()

在 Uniapp 的页面生命周期中:

  • onLoad() 仅在页面首次创建时调用一次。
  • onShow() 每次页面 显示 时都会触发,包括:
    首次进入页面
    从其他页面返回

如果 onLoad() 和 onShow() 都调用 getLastSubmission(),那么:

初次进入:onLoad() 调用 getLastSubmission(),然后 onShow() 立即执行,导致 请求了两次

返回页面:onShow() 再次调用 getLastSubmission(),符合预期

需要解决 初次进入时调用两次的问题

1. 变量(不生效)

定义 firstLoad 变量,初次进入页面时设为 true。

onLoad() 执行 getLastSubmission(),但 onShow() 第一次不执行。

onShow() 仅在 firstLoad = false 后执行,避免初次进入时的重复调用

js 复制代码
export default {
	data() {
		return {
			lastSubmission: null, 
			firstLoad: true // 标记是否是第一次进入
		};
	},
	onLoad() {
		this.getLastSubmission(); // 初次加载时调用
	},
	onShow() {
		if (!this.firstLoad) {
			this.getLastSubmission(); // 仅在返回时调用
		} else {
			this.firstLoad = false; // 标记为已加载,后续 onShow 可执行
		}
	},
	methods: {
		async getLastSubmission() {
			try {
				const res = await getSelf();
				if (res?.data) {
					this.lastSubmission = res.data;
				} else {
					this.lastSubmission = null;
				}
			} catch (error) {
				this.lastSubmission = null;
			}
		}
	}
};

2. 延迟(生效)

核心思路:

在 onLoad() 先调用 getLastSubmission(),但不立即设置 loaded = true.通过 setTimeout() 稍微延迟 loaded,确保 onShow() 触发时不会误调用

js 复制代码
export default {
	data() {
		return {
			lastSubmission: null, 
			loaded: false // 标记是否已经加载过
		};
	},
	onLoad() {
		this.getLastSubmission().then(() => {
			setTimeout(() => {
				this.loaded = true; // 延迟标记 loaded,防止 onShow 立即执行
			}, 100); 
		});
	},
	onShow() {
		if (this.loaded) {
			this.getLastSubmission(); 
		}
	},
	methods: {
		async getLastSubmission() {
			try {
				const res = await getSelf();
				if (res?.data) {
					this.lastSubmission = res.data;
				} else {
					this.lastSubmission = null;
				}
			} catch (error) {
				this.lastSubmission = null;
			}
		}
	}
};

初次进入:

onLoad() 调用 getLastSubmission(),但 loaded 需要 100ms 才变 true。onShow() 立即触发,但 loaded = false,不会调用 getLastSubmission()

返回页面:

onShow() 触发 getLastSubmission(),刷新数据

相关推荐
β添砖java7 小时前
CSS定位布局
前端·css·html
2501_916007477 小时前
Java界面开发工具有哪些?常用Java GUI开发工具推荐、实战经验与对比分享
android·java·开发语言·ios·小程序·uni-app·iphone
chensi_078 小时前
uniapp x 鸿蒙开发之调试证书签名配置
服务器·uni-app·harmonyos
iOS阿玮9 小时前
AppStore提审混合开发技术选型,独立开发者和公司都适用。
uni-app·app·apple
豆豆豆大王10 小时前
HTML 与 JavaScript 结合 “点击按钮弹出提示” 的交互功能
javascript·html·交互
mumu1307梦12 小时前
html 占位符
前端·javascript·html
Eiceblue14 小时前
Python 将 HTML 转换为纯文本 TXT (HTML 文本提取)
开发语言·vscode·python·html
2501_9159214314 小时前
TCP 抓包分析实战,从抓取到定位(命令、常见症状、排查流程与真机抓包补充)
网络·网络协议·tcp/ip·ios·小程序·uni-app·iphone
2501_9160137414 小时前
App 上架服务全流程解析,iOS 应用代上架、ipa 文件上传工具、TestFlight 测试与苹果审核实战经验
android·ios·小程序·https·uni-app·iphone·webview
小样还想跑14 小时前
UniApp键盘监听全攻略
vue.js·uni-app·计算机外设