問題背景
在uni-app中任柜，uni.request等許多接口都是異步的秽五，直接使用可能會導致頁面渲染完畢時酿联，數(shù)據還未成功獲取的情況萧诫，必須手動觸發(fā)方法或頁面修改后重新渲染才能重新獲取數(shù)據板壮。
解決方法
- 總體思路就是使用
async+await逗鸣，使異步問題同步化。 - 需要 注意 的是绰精，這里需要借助Promise構造函數(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ù)返回了一個Promise對象卿樱，而不是直接調用uni.request進行數(shù)據請求。這是因為await關鍵字（詳見下面的代碼）后必須跟Promise對象硫椰，否則不會阻塞之后代碼的執(zhí)行繁调。
class.vue:
initPage: async function () {
await api.getAllClass(); // 關鍵點
this.getUserClassInfo(this.userInfo.selectedClass);
}
在上述initPage函數(shù)中萨蚕，第3行api.getAllClass()執(zhí)行完畢后，是第4行this.getUserClassInfo()才能獲取到所需的數(shù)據蹄胰。所以這里需要將異步問題同步化岳遥。
總而言之，解決問題的關鍵點在于：
- 將
uni.request請求封裝在Promise構造函數(shù)中（使該api返回的是一個Promise對象） - 使用
async+await
