小程序onlanch和page的onload的执行顺序问题

最新推荐文章于 2024-06-15 12:25:19 发布

web_sunn

最新推荐文章于 2024-06-15 12:25:19 发布

阅读量918

点赞数

文章标签：小程序微信小程序

本文链接：https://blog.csdn.net/web_sunn/article/details/130699828

版权

文章讲述了在小程序中，由于onLaunch中的异步网络请求可能在Page.onload之后返回，导致数据同步问题。为了解决这个问题，可以通过定义回调函数或者使用Promise将onLaunch的请求封装，以便在Page.onload中等待请求完成后再进行后续操作。

摘要由CSDN通过智能技术生成

问题: 等待小程序onlanch执行完毕之后page的onload再执行
产生原因：小程序网络请求默认为异步请求，在appjs的onLaunch运行后进行异步请求时，程序不会停止，Page页已执行onload
目标: onLaunch 请求完－> 再执行Page的onLoad方法
解决方法：通过定义回调函数

//app.js
 
App({
  onLaunch: function () {
    wx.request({
      url: '接口请求', 
      data: {},
      success: function(res) {
        this.globalData.checkLogin = true;
        //由于这里是网络请求，可能会在 Page.onLoad 之后才返回
        // 所以此处加入 callback 以防止这种情况
        if (this.checkLoginReadyCallback){
           this.checkLoginReadyCallback(res);
        }
      }
    })
  },
  globalData: {
    checkLogin: false
  }
})
 
 
//index.js
//获取应用实例
const app = getApp()
 
Page({
  data: {
    test: false
  },
  onLoad: function () {
    let that = this;
    //通过三方变量判断onLaunch是否执行完毕
    //如果执行完毕则正常进行后续操作 如果没有执行完毕则添加回调函数callback通过callback获取返回值从而进一步操作 
    if (app.globalData.checkLogin){
      that.setData({
        test:true
      })
    }else{
      app.checkLoginReadyCallback = res => {
        that.setData({
          test:true
        })
      };
    }
  }
})

同理上面通过三方变量追加回调函数可以进行简化直接把Lanch里面的请求进行进一步封装为promise这样在page的onload里面可直接使用.then进行后续操作。