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 之后執行
版權屬于：瞭月
本文鏈接：https://www.lervor.com/archives/128/
發表評論