小程序的异步导至 app.onLaunch 和 index的onload 执行先后顺序无法控制_微信小程序app.js全部执行玩在执行index.js

当我们设计小程序的时候, 我们希望在 app.js 开始加载的时间, 就对后端发起请求, 返回用户的信息, 之后来决定用户的首页显示什么内容, 也就是我们希望的执行顺序是 app.js --------> index.js, 但是结果时我们经常会在进入首页的时候, 得不到用户的信息, 并且这种情况是时有时无,为什么呢?

原因

因为小程序发起请求是异步的, 也就是说, 当我们在 app.js 发起请求 , 查询用户信息的时候, 小程序还在续继, 没有阻塞, 所以小程序继续走到 index.js 显示了首页, 这后, app.js中的请求,才被后端返回数据, 但此时, index.js 的 onload已经执行过了, 不会再次执行了, 所以就出现了, 首页显示和我们的预期不一样, 忽然想到了电影中刀下留人的场景, 如果马儿跑慢了点的话, 就是这们效果的

解决

我们知道了是因为异步请求, 才引起了这种情况, 那我们怎么解决呢,回调, 我们在首页index.js中为 app.js定义一个回调函数, 在app.js中, 来执行这个回调函数, 如下图
首页index.js

onLoad:function(option){

    if(option && option.showlogin==1){
      this.setData({
        showlogin:1
      })
    }

    if(app.globalData.userInfo){
      this.setData({
        userInfo:app.globalData.userInfo
      })
      if(this.data.userInfo == "nouserinfo"){
        this.setData({
          notUser:1
        })
      }
    }else{
      app.indexCallback = (res)=>{
        this.setData({
          userInfo:res.data.userInfo
        })
        if(res.data.userInfo == "nouserinfo"){
          this.setData({
            notUser:1
          })
        }
      }
    }


    // console.log(this.data.userInfo);

    this.quanyilist();
    this.bannerlist();
  },
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

在其中做了一个判断, 如果 app.globalData.userInfo 不为空时,就把userinfo赋给当前页面的 userinfo, 如果app.globalData.userinfo为空时, 就为 app.js 定义一个回调

分析一下这里的代码
app.globalData.userInfo如果为空, 则说明, app.js中的请求用户信息的异步请求还没有返回, 如果执行到了这个代码块, 说明 index.js的onload 比 app.js中的onLaunch 先执行了, 所以, 我们要给app.js,添加一个回调, 让它在异步请求返回时, 把请求到的数据,通过回调函数来告知 index.js , 触发index.js上的数据刷新
app.globalData.userInfo如果不为空, 则说明, app.js先于index.js执行完成, 这是个正常我们期望的顺序, 不用多说

再来看看我们app.js onlaunch中的代码

App({
  onLaunch: function () {
    let headerHeight = this.getHeaderHeight();
    this.globalData.headerHeight = headerHeight;

    this.userLogin();
  },

  userLogin(){
    let that = this;
    indexModel.login().then((res)=>{
      that.globalData.userInfo = res.data.userInfo
      App({
  onLaunch: function () {
    let headerHeight = this.getHeaderHeight();
    this.globalData.headerHeight = headerHeight;

    this.userLogin();
  },

  userLogin(){
    let that = this;
    indexModel.login().then((res)=>{
      that.globalData.userInfo = res.data.userInfo
      that.indexCallback && that.indexCallback(res);
    })
  },
    })
  },
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

app.onlaunch中调用了 userlogin, userlogin 中的异步请求 判断并调用了 indexCallback 的方法, 如果有就回调, 如果没有, 就不执行 that.indexCallback && that.indexCallback(res) 这里用的是语法中的短路

代码说明
indexCallback如果为真, 对就应的是 app.js的请求还没有返回 index.js 中的onload已经执行了, 并为app.js 注册了这个回调,
indexCallback如果为假, 说明 请求返回的时候, index.js 还没有执行, 是我们期望的顺序