uniapp中onLaunch和onload的先后执行顺序

uniapp中onLaunch和onload的先后执行顺序

onLaunch与onload分别是APP生命周期与页面生命周期，理论上应该先执行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;
		
		//执行页面中的业务逻辑
		//...
	},

个人理解

1先给onLaunch方法套一个promise实例，执行成功后再执行全局挂载的方法，标识当前已经执行完毕。
2.在页面中利用async/await 同步执行代码的方法，实现onLaunch 在 onLoad 之后执行

非原创，转载自以下链接 (感谢分享)

链接: uni-app 中利用 Promise 实现 onLaunch 异步回调后执行 onLoad.