問(wèn)題背景

在uni-app中，uni.request等許多接口都是異步的，直接使用可能會(huì)導(dǎo)致頁(yè)面渲染完畢時(shí)，數(shù)據(jù)還未成功獲取的情況，必須手動(dòng)觸發(fā)方法或頁(yè)面修改后重新渲染才能重新獲取數(shù)據(jù)。

解決方法

• 總體思路就是使用async + await，使異步問(wèn)題同步化。
• 需要 注意 的是，這里需要借助Promise構(gòu)造函數(shù)將uni.request封裝一下。

代碼

api.js:

getAllClass: () => {
    return new Promise((resolve, reject) => {
        uni.request({
            url: BASE_URL + 'class/getClassList',
            success: (res) => {
                store.commit('setAllClass', res.data);
                resolve('suc');
            },
            fail: (err) => {
                reject('err')
            }
        });
    })
}

可以看到，上述示例代碼中，getAllClass函數(shù)返回了一個(gè)Promise對(duì)象，而不是直接調(diào)用uni.request進(jìn)行數(shù)據(jù)請(qǐng)求。這是因?yàn)?code>await關(guān)鍵字（詳見(jiàn)下面的代碼）后必須跟Promise對(duì)象，否則不會(huì)阻塞之后代碼的執(zhí)行。

class.vue:

initPage: async function () {
    await api.getAllClass();   // 關(guān)鍵點(diǎn)
    this.getUserClassInfo(this.userInfo.selectedClass);
}

在上述initPage函數(shù)中，第3行api.getAllClass()執(zhí)行完畢后，是第4行this.getUserClassInfo()才能獲取到所需的數(shù)據(jù)。所以這里需要將異步問(wèn)題同步化。

總而言之，解決問(wèn)題的關(guān)鍵點(diǎn)在于：

1. 將uni.request請(qǐng)求封裝在Promise構(gòu)造函數(shù)中（使該api返回的是一個(gè)Promise對(duì)象）
2. 使用async + await