uniapp中onLaunch和onload的先后執(zhí)行順序

onLaunch與onload分別是APP生命周期與頁(yè)面生命周期，理論上應(yīng)該先執(zhí)行onLaunch 后執(zhí)行頁(yè)面生命周期onLoad。然而實(shí)際上并非如此，在執(zhí)行onlaunch的同時(shí)，也會(huì)執(zhí)行onLoad生命周期，而在實(shí)際開發(fā)中往往需要優(yōu)先執(zhí)行onlaunch后再執(zhí)行onLoad，因此可以使用當(dāng)前方法解決。

一、main.js添加如下代碼？

代碼如下（示例）

// 讓頁(yè)面的 onLoad 在 onLaunch 之后執(zhí)行

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

    Vue.prototype.$isResolve = resolve

})

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

代碼如下（示例）：

//app.vue生命周期中，onlaunch執(zhí)行時(shí)，執(zhí)行this.$isResolve()

onLaunch () {

        //發(fā)送請(qǐng)求

    uni.request({

        success: loginRes => {       

            // 業(yè)務(wù)邏輯

            // ...

            // 當(dāng)執(zhí)行完業(yè)務(wù)邏輯，需要同步onload時(shí)，調(diào)用一下

            this.$isResolve()           

        }

    })

}

三、在頁(yè)面 onLoad 中增加代碼 await this.$onLaunched；

代碼如下（示例）：

//onLoad 生命周期函數(shù)前，加async/await,用此方法同步執(zhí)行順序

        async onLoad() {

               //async/await,當(dāng)執(zhí)行完APP生命周期中的onlaunch，再執(zhí)行頁(yè)面中的業(yè)務(wù)邏輯

               await this.$onLaunched;

               //執(zhí)行頁(yè)面中的業(yè)務(wù)邏輯

               //...

        },

個(gè)人理解

1先給onLaunch方法套一個(gè)promise實(shí)例，執(zhí)行成功后再執(zhí)行全局掛載的方法，標(biāo)識(shí)當(dāng)前已經(jīng)執(zhí)行完畢。
2.在頁(yè)面中利用async/await 同步執(zhí)行代碼的方法，實(shí)現(xiàn)onLaunch 在 onLoad 之后執(zhí)行

版權(quán)屬于：瞭月

本文鏈接：https://www.lervor.com/archives/128/