uni-app中使用 async + await 实现异步请求同步化-阿里云开发者社区

uni-app中使用 async + await 实现异步请求同步化

2022-11-21 3202

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： uni-app中使用 async + await 实现异步请求同步化

问题：

在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>