小程序onLaunch onLoad 異步執行問題

轉載來源：https://www.lervor.com/archives/128/

問題描述

我們在用 uni-app 開發前端項目時，會遇到需要在 onLaunch 中請求接口返回結果，並且此結果在項目各個頁面的 onLoad 中都有可能使用到的需求，
比如微信小程序在 onLaunch 中進行登錄后取得 openid 並獲得 token，項目各頁面需要帶上該 token 請求其他接口。但是，onLaunch 中的請求是異步的，
也就是說在執行 onLaunch 后頁面 onLoad 就開始執行了，而不會等待 onLaunch 異步返回數據后再執行，這就導致了頁面無法拿到 onLaunch 中異步獲取的數據。

解決方案

步驟1
在 main.js 中增加如下代碼：

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

 

步驟2
在 App.vue 的 onLaunch 中增加代碼 this.$isResolve()，具體如下：

onLaunch () {
    // #ifndef H5
    uni.login({
        success: loginRes => {
            // #ifdef MP-WEIXIN
            login({ // 該接口為我們自己寫的獲取 openid/token 的接口，請替換成自己的
                appId: 'wx1234567890',
                code: loginRes.code
            }).then(res => {
                try {
                    console.info(res.object.token)
                    uni.setStorageSync('mcToken', res.object.token)
                    this.$isResolve()
                } catch (e) {
                    console.error(e)
                }
            })
            // #endif
        }
    })
    // #endif
}

 

步驟3
在頁面 onLoad 中增加代碼 await this.$onLaunched，具體如下：

async onLoad(option) {
    await this.$onLaunched

    let token = ''
    try {
        token = uni.getStorageSync('mcToken')
    } catch(e) {
        console.error(e)
    }

    // 下面就可以使用 token 調用其他相關接口
}