uni-app中使用 async + await 实现异步请求同步化
问题:在uni-app中,uni.request等网络请求都是异步的,直接使用可能会导致页面渲染完毕时,数据还未成功获取的情况。解决方法:<script>export default {data() {return {};},methods:{getOutInfo(){return new Promise((resolve, reject) =...
·
问题:
在uni-app中,uni.request等网络请求都是异步的,直接使用可能会导致页面渲染完毕时,数据还未成功获取的情况。
解决方法:
<script>
export default {
data() {
return {};
},
methods:{
getOutInfo(){
return new Promise((resolve, reject) => {
uni.request({
url : `请求地址`,
method : "GET",
data : {},
success: (res) => {
console.log(res)
resolve('suc'); // 千万别忘写!!!
},
fail:(err)=>{
reject('err')
}
})
})
},
async mountDealCount(){
await this.getOutInfo()
console.log('我在数据获取之后执行')
}
},
beforeMount(){
this.mountDealCount()
}
}
</script>
效果:
注意:当调用的级数增加的时候,需要逐级的增加async和await
<script>
export default {
methods:{
getOutInfo(){
return new Promise((resolve, reject) => {
uni.request({
url : `请求地址`,
method : "GET",
data : {},
success: (res) => {
console.log(res)
resolve('suc'); // 千万别忘写!!!
},
fail:(err)=>{
reject('err')
}
})
})
},
async dealInfo(){
await this.getOutInfo()
console.log('我在数据获取之后执行')
},
async loadDeal(){
await this.dealInfo()
console.log('我在 dealInfo 之后执行')
}
},
beforeMount(){
this.loadDeal()
}
}
</script>
总结:
- 将uni.request请求封装在Promise构造函数中;
- 使用async + await;
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献5条内容
所有评论(0)