微信小程序 onLaunch onLoad onShow异步

小程序初始化时触发App里的onLaunch，后面再执行页面Page里的onLoad或onShow，但是在onLaunch里执行用户登录，等待返回值的时候Page里的onLoad或onShow事件就已经执行了。

原代码段
app.js代码片.

  globalData = {
    userInfo: null,
    token:''
  }
  onLaunch() {
    this.$interceptors = {
      request: {
        config(p) {
          p.url = 'http://test.xxx.com/api' + p.url
          if(this.globalData.token && this.globalData.token != ''){
             p.header = {
              token: this.globalData.token
            };
          }
          return p;
        },
        success(rst) {
          return rst;
        }
      }
    };
    this.login();
  }
    login() {
    const self = this;
    wx.login({
      success(data) {
        wepy.request({
          url: '/user/login?code='+data.code,
          success: function(res) {
              wx.setStorageSync('userInfo', res.data.obj);
              self.globalData.token=res.data.obj.token ;  
          }
    });
  }

index.js代码片段

  onShow(){
      let self = this
     wx.request({
       url: '/message/get-count',
       success: function(res) {
         if (res.data.obj.count != 0) {
           self.msgimg = '../img/msg.png';
           self.msgshow = 'block';
           self.msgnum = res.data.obj.count;
         } else {
           self.msgimg = '../img/nomsg.png';
           self.msgshow = 'none';
         }
         self.$apply();
       }
     });
   }

解决办法

这里采用的方法是在page页面定义一个回调函数，onLaunch请求完再执行回调函数。需要注意的是page页面判断一下当前 globalData.token 是否有值去然后再去请求业务接口。

App页面在请求success后判断时候有page页面定义的回调方法，如果有就执行该方法。因为回调函数是在Page里面定义的所以方法作用域this是指向Page页面。
定义了回调函数的 index.js 代码片

    onShowCall(){
    let self = this
     wx.request({
        url: '/message/get-count',
        success: function(res) {
          if (res.data.obj.count != 0) {
            self.msgimg = '../img/msg.png';
            self.msgshow = 'block';
            self.msgnum = res.data.obj.count;
          } else {
            self.msgimg = '../img/nomsg.png';
            self.msgshow = 'none';
          }
          self.$apply();
        }
      });
  }
    onShow(){
      var token = this.$parent.globalData.token
        console.log("token:"+token);
        if( token == ''){
          getApp().loginCallback = res => {
            this.onShowCall()
        };
        }else{
          this.onShowCall()
        }
    }

加了回调函数的 app.js 代码片段

globalData = {
    userInfo: null,
    token:''
  }
  onLaunch() {
    this.$interceptors = {
      request: {
        config(p) {
          p.url = 'http://test.xxx.com/api' + p.url
          if(this.globalData.token && this.globalData.token != ''){
             p.header = {
              token: this.globalData.token
            };
          }
          return p;
        },
        success(rst) {
          return rst;
        }
      }
    };
    this.login();
  }
    login() {
    const self = this;
    wx.login({
      success(data) {
        wepy.request({
          url: '/user/login?code='+data.code,
          success: function(res) {
              wx.setStorageSync('userInfo', res.data.obj);
              self.globalData.token=res.data.obj.token ; 
               //这里调用回调函数
               if (getApp().loginCallback) {
               getApp().loginCallback(res.data.obj.token);
              }  
          }
    });
  }

这样的话，就能实现想要的结果。执行顺序就是：

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