uniapp中 APP.vue中的onLaunch执行后 页面中的onload。

本文讨论了在Vue应用中,如何确保onLaunch(全局初始化)在onLoad(页面初始化)之后执行,避免数据加载问题。通过在App.vue的onLaunch中使用Promise和在onLoad中添加async/await,实现了控制这两个生命周期函数的执行顺序。
摘要由CSDN通过智能技术生成

onLaunch 是应用生命周期,初始化完成时触发(全局只触发一次),
onload是页面生命周期,理论上应该先执行onLaunch 后执行页面生命周期onLoad,实际上在执行onlaunch的同时,也会执行onLoad生命周期,可能会导致一些数据加载问题。

一、main.js

// 让页面的 onLoad 在 onLaunch 之后执行
Vue.prototype.$onLaunched = new Promise(resolve => {
    Vue.prototype.$isResolve = resolve
})

二、在 App.vue 的 onLaunch 中增加代码 this.$isResolve();

//app.vue生命周期中,onlaunch执行时,执行this.$isResolve()
onLaunch () {
	//发送请求
    uni.request({
        success: loginRes => {        
            // 当执行完业务逻辑,需要同步onload时,调用一下
            this.$isResolve()            
        }
    })
}

三、在页面 onLoad 中增加代码 await this.$onLaunched;

//onLoad 生命周期函数前,加async/await,用此方法同步执行顺序
	async onLoad() {
		//async/await,当执行完APP生命周期中的onlaunch,再执行页面中的业务
		await this.$onLaunched;
		
		//执行页面中的业务代码

	},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值