微信小程序:首页需要等待onLaunch中某请求执行完成

小程序开发中有时候会遇到下面这样的情况:

小程序打开时,我们需要触发登陆,获取用户的基本信息,然后在首页中立即使用,但是会发现在app.js的onLaunch中请求发出去了,首页在onLoad中却没有拿到数据?

还有一个场景,比如,你希望用户在打开小程序的时候,就会自动定位,无论用户进入小程序先看到的是哪个页面,那么,定位函数势必需要在onLaunch中触发,但是呢,定位异步请求需要时间,你首页需要使用定位去获取数据,首页在onLoad中去使用定位时,是根本没办法拿到定位信息的。

这是因为异步请求,还没拿到结果,onLoad就执行了。

小程序官方给的方法是:使用回调,还挺好用的~

app.js中

// 登录
App({
  onLaunch: function () {
    
    this.wxLogin(res => {
      if (res.data.code == 200) {
        this.globalData.loginInfo = res.data.data;
      } else{
        // 载入登录缓存信息
        this.globalData.loginInfo = wx.getStorageSync('loginInfo') || {token: ''};
      }
      // 回调,请求得到响应,反馈给loginInfo这个函数
      if (this.loginInfoCallback) {
        this.loginInfoCallback(this.globalData.loginInfo)
      }

    }, fail => {
      // 登陆失败的时候  载入登录缓存信息
      this.globalData.loginInfo = wx.getStorageSync('loginInfo') || {token: ''};

      if (this.loginInfoCallback) {
        this.loginInfoCallback(this.globalData.loginInfo)
      }
    })
  },

   wxLogin: function (success, fail, complete){
    // ......一堆代码.....
   }
})

index.js

var app = getApp();


Page({
    // 多余的代码省略了,只摘录了关键部分
    onLoad: function () {
        // 检查登录信息是否在全局变量中吗?在的话说明登陆请求在此刻已经执行完成了,就不用去调回调了,我们可以直接使用
        if (app.globalData.loginInfo.token && app.globalData.loginInfo.token != '') {
          this.setData({ 
             userBindPhone: loginInfo.mobile ? true : false,
          })
        } else {
           // 如果全局中没有,那么我们就得等一下下,等带它完成后我们再去使用
           // 在这里调用app.loginInfoCallback函数,就可以等待该函数回调响应去做页面逻辑处理
          app.loginInfoCallback = (loginInfo) => {
            this.setData({ 
              userBindPhone: loginInfo.mobile ? true : false,
            })
          }
        }
    }

})

回调函数的名字' loginInfoCallback ' 可以自己定义

 

你可能感兴趣的:(微信小程序)