問題背景

在uni-app中，uni.request等許多介面都是非同步的，直接使用可能會導致頁面渲染完畢時，資料還未成功獲取的情況，必須手動觸發方法或頁面修改後重新渲染才能重新獲取資料。

解決方法總體思路就是使用async + await，使非同步問題同步化。需要 注意 的是，這裡需要藉助Promise建構函式將uni.request封裝一下。程式碼

//API.jsgetAllClass: () => { 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函式返回了一個Promise物件，而不是直接呼叫uni.request進行資料請求。這是因為await關鍵字（詳見下面的程式碼）後必須跟Promise物件，否則不會阻塞之後程式碼的執行。

//class.vue:initPage: async function () { await api.getAllClass(); // 關鍵點 this.getUserClassInfo(this.userInfo.selectedClass);}

在上述initPage函式中，第3行api.getAllClass()執行完畢後，是第4行this.getUserClassInfo()才能獲取到所需的資料。所以這裡需要將非同步問題同步化。

總而言之，解決問題的關鍵點在於：

將uni.request請求封裝在Promise建構函式中（使該api返回的是一個Promise物件）使用async + await