解决微信小程序开发中onLanch与onLoad的异步问题

在微信小程序开发中APP.vue中的onlanch与首页index.vue中的onload的异步问题,在同时触发的情况下,如何保证先全部执行完onlanch中的代码,拿到返回值之后再去执行onload中的代码
比如:我想要在应用启动的时候去拿到openid或者是用户信息token...,在没有返回需要的数据之前,小程序却去执行首页index.vue中的onload,从而导致后续的代码没有openid的支持,没有openid导致token也拿不到,没有token就请求不到任何数据,从而导致用户一打开页面啥都看不到

写个deom
App.vue程序启动,用计时器进行异步

export default {
    onLaunch: function() {
        console.log('项目启动了')
            setTimeout(()=>{
                console.log('加载1')
                setTimeout(()=>{
                    console.log('加载2')
                    setTimeout(()=>{
                        console.log('加载3')
                    },1000)
                },1000)
            },1000)
    }
};

在首页index.vue onload中

onLoad() {
            console.log('页面加载..')
            setTimeout(()=>{
                console.log('页面1')
                setTimeout(()=>{
                    console.log('页面2')
                    setTimeout(()=>{
                        console.log('页面3')
                    },1000)
                },1000)
            },1000)
        }

程序执行打印结果

snipaste_20200531_212039.png

执行顺序
onlanch同步=>onload同步=>onload异步=>onlanch异步

解决1

定时器延迟onload中的代码,但是在真实开发中这是不现实的,因为当用户网速不好的情况下,请求onlanch中的代码超过定时器的时间范围,就会执行onload里面的代码,所以还是一片空白,那用户网速好的时候,也不会过快的加载出来,而是等定时器运行完才会进行加载,这种有规定时间的解决办法算不上真正解决办法

解决2

ES6中提供了一个promise方案是一个不错的解决方法

promise是什么？

1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列

基本用法:

<script>
  function runAsync() {
      console.log('准备洗澡')
    return new Promise(function (resolve, reject) {
      //做一些异步操作
      setTimeout(function () {
        console.log("洗澡完成");
        resolve("干干净净");
      }, 2000);
    });
  }
  // 如何用？
  runAsync()
    .then((res) => {
      console.log(res);
    })
</script>

把你原来写在APP.vue中的onlanch的代码拿出来,重新写一个方法

function login(){
    return new Promise((resolve, reject)=>{
        console.log('项目启动了')
        setTimeout(()=>{
            console.log('加载1')
            setTimeout(()=>{
                console.log('加载2')
                setTimeout(()=>{
                    console.log('加载3')
                    //全部加载成功,在去加载onload
                    resolve()
                },1000)
            },1000)
        },1000)
    })
}
//暴露
export default login

在首页onload中

//导入
import login from '@/utils/token.js'

login().then(res=>{
                console.log('页面加载..')
                setTimeout(()=>{
                    console.log('页面1')
                    setTimeout(()=>{
                        console.log('页面2')
                        setTimeout(()=>{
                            console.log('页面3')
                        },1000)
                    },1000)
                },1000)
            })

执行过程

snipaste_20200531_224413.png

解决3

使用侦听器监听onlanch里的代码是否全部执行完毕

    watch:{
            //监听onlanch中的vuex中bol的数据改变执行
            "$store.state.bol"(){
                //一旦onlanch加载完毕,修改vuex数据,就执行以下代码
                console.log('页面加载..')
                setTimeout(()=>{
                    console.log('页面1')
                    setTimeout(()=>{
                        console.log('页面2')
                        setTimeout(()=>{
                            console.log('页面3')
                        },1000)
                    },1000)
                },1000)
            }
        },

vuex代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({
    state:{
        //数据
        bol:false
    },
    //方法
    mutations:{
        change(state,val){
            state.bol=val
        }
    }
})
export default store

onlanch中代码

setTimeout(()=>{
                console.log('加载3')
                //修改vuex数据
                store.commit('change',true)
            },1000)

执行结果和以上情况一样,都可以解决

解决4

使用路由插件 uni-simple-router 可以拦截页面进入之前 并强化了onlaunch异步的问题,这也是目前最好的解决办法