小程序app.js中onLaunch异步调用云函数时,首页onLoad无法调用异步的问题

按照官方文档,小程序运行是会先执行app.js中的app方法注册小程序,因此app方法中的onLaunch会最先执行,接下去才会到首页的onLoad,然而在onLaunch执行了一个异步方法,比如我这边请求请求一个云函数:

onLaunch: function() {
    this.getsys()
},
getsys(){
    wx.cloud.callFunction({
      name:‘sysconfig‘,
      data:{
        command:‘get‘
      },
    })
    .then(res => {
      let data = res.result.data[0]
      console.log(‘data‘,data)
      this.globalData.address = data.address
      this.globalData.name = data.name
    })
},

接下去在首页中调用:

onLoad: function () {
    console.log(‘名字是‘,app.globalData.name)
}

这下直接打印出了:名字是 undefined

经过疯狂查阅资料,发现利用一个callback回调即可解决问题,修改后的代码

app.js

onLaunch: function() {
    this.getsys()
},
getsys(){
    wx.cloud.callFunction({
      name:‘sysconfig‘,
      data:{
        command:‘get‘
      },
    })
    .then(res => {
      let data = res.result.data[0]
      console.log(‘data‘,data)
      this.globalData.address = data.address
      this.globalData.name = data.name
      //由于这里是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      if (this.addressCallback){
        this.addressCallback(data.address);
      }
      if (this.nameCallback){
        this.nameCallback(data.name);
      }
    })
},    

 

index.js

onLoad: function () {
     //判断是app.globalData.address是否存在
    if (!app.globalData.address || app.globalData.address == ‘‘) {
      app.addressCallback = address => {
        console.log(‘address=‘,address)
        this.setData({
          address:address
        })
      }
    } 
    //判断是app.globalData.name是否存在
    if (!app.globalData.name || app.globalData.name == ‘‘) {
      app.nameCallback = name => {
        console.log(‘name=‘,name)
        this.setData({
          name:name
        })
      }
    } 
},

 

再调试一下,bingo!

 

小程序app.js中onLaunch异步调用云函数时,首页onLoad无法调用异步的问题

上一篇:微信小程序登录鉴权流程图


下一篇:微信小程序获取当前用户的openid