小程序onLaunch执行异步，如何解决onLoad先执行的问题？

小程序开发时，按照事件顺序，小程序初始化触发APP的onlaunch后，在去是行页面Page的onload。但现实常常是，由于onlaunch里在请求获取是否有权限、等待返回值的时候，页面page里的onload事件已经执行了。那么，这个问题该如何去解决呢？小编get到一种方式，下面跟大家分享一下。

  要想实现等onLaunch请求完再执行Page的onLoad，其实可以采用定义一个回调函数的方法。Page页面要判断一下当前app.globalData.employId是否有值，没有的话，则定义一个app方法（回调函数）app.employIdCallback = employId => {...}。

而App页面在请求success后，去判断是否有Page页面定义的回调方法，如果有就执行该方法。另外，因为回调函数是在Page里面定义的，所以方法作用域this是指向Page页面。

下面我们看一下示例代码：

//app.js

App({

  onLaunch: function () {

    wx.request({

      url: 'test.php', //仅为示例，并非真实的接口地址

      data: {

      },

      success: function(res) {

        this.globalData.employId = res.employId;

        //由于这里是网络请求，可能会在 Page.onLoad 之后才返回

        // 所以此处加入 callback 以防止这种情况

        if (this.employIdCallback){

           this.employIdCallback(res.employId);

        }

      }

    })

  },

  globalData: {

    employId: ''

  }

})

//index.js

//获取应用实例

const app = getApp()

Page({

  data: {

    albumDisabled: true,

    bindDisabled: false

  },

  onLoad: function () {

    //判断是用户是否绑定了

    if (app.globalData.employId && app.globalData.employId != '') {

      this.setData({

        albumDisabled: false,

        bindDisabled: true

      });

    } else {

      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回

      // 所以此处加入 callback 以防止这种情况

      app.employIdCallback = employId => {

        if (employId != '') {

          this.setData({

            albumDisabled: false,

            bindDisabled: true

          });

        }

      }

    }

  }

})

这样，它的执行顺序就变成如下：

[App] onLaunch -> [Page] onLoad -> [App] onLaunch sucess callback