关于uni-app 中 使用async + await 将异步请求同步化
这段时间在使用uni-app开发小程序,希望在页面加载时,获取地区数据,然后展示到页面上。
一开始写在了onLoad方法上,发现页面加载时,用异步uni.request方法获取数据,当页面加载完后,异步方法还未获取到数据,赋值给变量的时候是空值。
代码片段:
onLoad() { uni.request({ url: url, data: {}, method:'GET', header: { 'Access-Control-Allow-Origin':'*' }, success: (result) => { try { uni.setStorageSync('storage_area', JSON.parse(result.data.items)); this.arealist = JSON.parse(res.data.items); } catch (e) { // error } }, fail: (e) => { res(e); } }) }
在这里 arealist 这个变量赋值过程延时,导致页面上展示的时候是空。
解决这个问题 使用 异步方法同步化 async和await关键字
onLoad(){ this.setAreaList(); }, methods: { async setAreaList(){ //这里使用异步关键字 let area = await this.areaCache(); //这里使用了await 会等待areaCache这个方法返回数据后才会去执行下面的代码 console.log(area); } }
areaCache方法必须返回的是一个Promise对象
areaCache:function(){ return new Promise((res) => { try { const value = uni.getStorageSync('storage_area'); if (value) { res(value); }else{ uni.request({ url: url, data: {}, method:'GET', header: { 'Access-Control-Allow-Origin':'*' }, success: (result) => { try { uni.setStorageSync('storage_area', JSON.parse(result.data.items)); res(JSON.parse(result.data.items)); } catch (e) { // error } }, fail: (e) => { res(e); } }) } } catch (e) { // error } }) }
注意点:这里的 async 和 await 必须成对出现 不然会报错。