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重新与数据库同步
313 0
|
监控 前端开发 Java
使用 GetIt 同步App不同页面间数据
本篇完成了整个动态管理的业务逻辑,包括了新增、删除、编辑、查看次数等功能。通过 GetIt 容器管理插件及接口定义,可以很简单快速地完成页面之间的数据同步。
464 0
使用 GetIt 同步App不同页面间数据
|
缓存 JavaScript 前端开发
使用APICloud开发App的性能优化探索——合理使用同步/异步接口
本文从同步/异步原理角度出发,介绍了App的优化方法,灵活使用这些方法,可以在开发App时给用户带来更好的使用体验。
243 1
|
存储 视频直播
如何理解直播APP源码开发中的音视频同步
视频 直播APP源码的视频的播放过程可以简单理解为一帧一帧的画面按照时间顺序呈现出来的过程,就像在一个本子的每一页画上画,然后快速翻动的感觉。
|
Android开发
直播APP源码是如何实现音视频同步的
直播APP源码音视频同步主要用于在音视频流的播放过程中,让同一时刻录制的声音和图像在播放的时候尽可能的在同一个时间输出。
|
Android开发
最新同步问题IOS10安全策略变更,native app需要增加alipays协议白名单
在IOS10里,由于安全策略的变化,导致在native app里,在webview中,默认不支持appschema协议(IOS10之前默认支持)。  如果需要支持,需要将此appschema加入白名单中,因此如果某个nativeapp 需要在webview中通过alipays://xxxx 的方式唤起支付宝app,请在 Info.
673 12
|
23天前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料?不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案,重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具,分析其适用场景与实际应用逻辑,为一线旅游从业者提供高效、低成本的执行参考。
|
2月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
2月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。

热门文章

最新文章