微信小程序:首页需要等待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 ' 可以自己定义

 

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
微信小程序的 app.js 的 onLaunch 生命周期无法直接等待异步请求执行完毕再执行 Page 的 onLoad 生命周期。但是可以通过 Promise 封装异步请求来解决这个问题。 具体实现方法如下: 1. 在 app.js 的 onLaunch 生命周期定义一个 Promise 对象。 2. 在 Promise 对象执行异步请求,并在请求成功时 resolve。 3. 在 Promise 对象捕获请求失败的异常,并在异常处理 reject。 4. 在 Page 的 onLoad 生命周期使用 Promise.then() 方法来等待异步请求执行成功后再执行相关逻辑。 代码示例如下: ``` // app.js App({ onLaunch: function () { const promise = new Promise((resolve, reject) => { wx.request({ url: 'http://example.com/api/data', success: (res) => { // 将获取到的数据保存到全局变量 this.globalData.data = res.data; resolve(); }, fail: (err) => { reject(err); } }) }); // 将 Promise 对象保存到全局变量 this.globalData.promise = promise; }, globalData: { data: null, promise: null } }) // page.js Page({ onLoad: function () { // 等待 Promise 对象执行成功后执行相关逻辑 getApp().globalData.promise.then(() => { const data = getApp().globalData.data; // 使用获取到的数据执行相关逻辑 }).catch((err) => { console.error('请求数据失败:', err); }); } }) ``` 在上述代码,我们将异步请求封装为一个 Promise 对象,并将其保存到全局变量。在 Page 的 onLoad 生命周期,我们通过访问全局变量的 Promise 对象来等待异步请求执行成功后再执行相关逻辑。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值