微信小程序中当有异步操作或者耗时同步操作时，不能保证app.js中的onLaunch与page.js中onLoad先后执行顺序的解决方案_微信小程序 异步顺序执行

微信小程序中当有异步操作或者耗时同步操作时，不能保证app.js中的onLaunch与page.js中onLoad先后执行顺序的解决方案

我在此为大家汇总了三种解决方案,大家普遍都会用这里的前两种方法,个人认为我的第三种方法更加巧妙且方便

方法一:

解决方法：定义回调函数
小程序网络请求默认为异步请求，在appjs的onLaunch运行后进行异步请求时，程序不会停止，Page页已执行onload,
我们希望onLaunch执行完后再执行onload。 目标: onLaunch 请求完 －> 再执行Page的onLoad方法
缺点:每个有可能的页面都要添加相关回调逻辑

//app.js
 
App({
  onLaunch: function () {
    wx.request({
      url: 'http://test.cn/login', //仅为示例，并非真实的接口地址
      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是否执行完毕
    if (app.globalData.checkLogin){
      that.setData({
        test:true
      })
    }else{
      app.checkLoginReadyCallback = res => {
        that.setData({
          test:true
        })
      };
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

执行顺序：[App] onLaunch -> [Page] onLoad -> [App] onLaunch sucess callback-> [Page] onLoad

方法二:

解决方法：将onLaunch 中的代码片段拿出来 用promise重构一下
promise的NPM地址
promiseCDN
将压缩版本的源码直接复制出来 在小程序中创建一个promise.js的文件 直接粘贴进去 然后在app.js中引用
const Promise = require('utils/promise.js');
缺点:每个有可能的页面都要添加相关逻辑

//app.js:
//将你本来写在 onLaunch 中的代码片段拿出来 重新写一个方法*
onLaunch:function(){
	login:function(){
    let that = this;
    return new Promise(function (resolve, reject) {
      // 登录
      wx.login({
        success: res => {
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
          if (res.code) {
            // console.log('获取用户登录凭证：' + code);
            // ------ 发送凭证 ------
            /*
            * 通过code获取登录session
            */
            wx.request({
              url: 'xxx/login?code=' + res.code,
              method: 'GET',
              header: {
                'content-type': 'application/json'
              },
              success: function (res) {
                console.log(res)
                if (res.statusCode == 200) {
                  // 注意这里
                  resolve(res);
                } else {
                  console.log(res.errMsg)
                }
              },
            })
          } else {
            console.log('获取用户登录失败：' + res.errMsg);
          }
        }
      })
    })
  }
}


//page.js

onLoad: function (options) {
    let _this = this;
    app.login().then(function (res) {
      let newDate = new Date();
      // 修改到当前的时间
      _this.changeNowTime();
    })
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

方法三:

解决方法：通过getCurrentPages()[0].onLoad()重新执行一次page.js中的onLoad方法
不用每个页面都写相关逻辑,只需要在app.js中加入以下几行相关代码即可
缺点:page.js中的onload方法会执行两次!

//app.js
 onLaunch: function (info) {
        //当进入小程序的场景为通过分享进入时,预防onLoad钩子请求不到数据
        if (info.path !== 'xxxxx/xxx/xxx') {
            console.log('info', info);
            setTimeout(() => {
                console.log('getCurrentPages', getCurrentPages());
                getCurrentPages()[0].onLoad(info.query);
            }, 1000);
        }
        // 登录
        wx.login({
            success: (xxx) => {
               	//xxxxxx
            },
        });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

最后:希望大家补充其它相关方法,分享是每一位程序员都要有的美德~

转载请注明出处!谢谢~
by:汪荣顶