uniapp应用生命周期 onLaunch 方法改同步，再调用页面生命周期_vue onlaunch

问题描述

        app.vue 里的 onLaunch 中如果有异步方法的话，其方法返回结果的时间可能会在页面 onLoad 生命周期后面。

例如：

        在app.vue页面中调用登录方法获取token。其token在页面接口请求中需要用到。但由于 onLaunch 中的请求都是异步的原因，这就导致了在 onLaunch 中登录方法还未成功返回结果，就执行了页面的 onLoad 方法。从而获取数据失败。

onLaunch: function() {
    
	console.log("app.vue-----onLaunch生命周期");
 
	setTimeout(() => {
 
		console.log('登录接口获取token');
 
	}, 4000)
}

     

解决方案

步骤1

main.js 中增加如下代码：

Vue.prototype.$onLaunched = new Promise(resolve => {
    Vue.prototype.$isResolve = resolve
})

步骤2

在 App.vue 的 onLaunch 中增加代码 this.$isResolve()，该方法必须在业务逻辑处理结束后再执行，具体如下：

onLaunch: function() {
	console.log("app.vue-----onLaunch生命周期");
	setTimeout(() => {
		console.log('登录接口获取token');
			
		this.$isResolve()
				
	}, 4000)
},

 步骤3

在页面 onLoad 中增加代码 await this.$onLaunched，

另：需注意 async  await 搭配使用实现同步

具体如下：

async onLoad() { 
    // 等待 onLaunch 返回结果
	await this.$onLaunched 
	console.log('首页onLoad-----生命周期');
    // 页面处理逻辑
},

如果需通过返回错误进行不同情况的处理的话也可以通过$isResolve 传入

例：

// app.vue 中onLaunch 
this.$isResolve(false)
 
//页面 onLoad 中
const result = await this.$onLaunched
console.log(result) // false

版权属于：瞭月

转载自：uni-app 中利用 Promise 实现 onLaunch 异步回调后执行 onLoad - 瞭月