一郎科技|使用async+await将uni-app中的异步请求同步化

本文插图

在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);}

【一郎科技|使用async+await将uni-app中的异步请求同步化】
在上述initPage函数中，第3行api.getAllClass()执行完毕后，是第4行this.getUserClassInfo()才能获取到所需的数据。所以这里需要将异步问题同步化。
总而言之，解决问题的关键点在于：