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

简介: 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>

效果:

2020062310470442.png

注意:当调用的级数增加的时候,需要逐级的增加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>

总结:

  1. 将uni.request请求封装在Promise构造函数中;
  2. 使用async + await;
相关文章
|
SQL 安全 关系型数据库
一日一技:如何让Django 的app migration重新与数据库同步
一日一技:如何让Django 的app migration重新与数据库同步
211 0
|
监控 前端开发 Java
使用 GetIt 同步App不同页面间数据
本篇完成了整个动态管理的业务逻辑,包括了新增、删除、编辑、查看次数等功能。通过 GetIt 容器管理插件及接口定义,可以很简单快速地完成页面之间的数据同步。
304 0
使用 GetIt 同步App不同页面间数据
|
缓存 JavaScript 前端开发
使用APICloud开发App的性能优化探索——合理使用同步/异步接口
本文从同步/异步原理角度出发,介绍了App的优化方法,灵活使用这些方法,可以在开发App时给用户带来更好的使用体验。
212 1
|
Android开发
最新同步问题IOS10安全策略变更,native app需要增加alipays协议白名单
在IOS10里,由于安全策略的变化,导致在native app里,在webview中,默认不支持appschema协议(IOS10之前默认支持)。  如果需要支持,需要将此appschema加入白名单中,因此如果某个nativeapp 需要在webview中通过alipays://xxxx 的方式唤起支付宝app,请在 Info.
630 12
|
存储 视频直播
如何理解直播APP源码开发中的音视频同步
视频 直播APP源码的视频的播放过程可以简单理解为一帧一帧的画面按照时间顺序呈现出来的过程,就像在一个本子的每一页画上画,然后快速翻动的感觉。
|
Android开发
直播APP源码是如何实现音视频同步的
直播APP源码音视频同步主要用于在音视频流的播放过程中,让同一时刻录制的声音和图像在播放的时候尽可能的在同一个时间输出。
|
30天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
452 7
|
30天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
502 1
|
16天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。

热门文章

最新文章