由于app.vue要加载必要数据,但是是异步的,在必要数据还没有获取的时候,就要进入首页,也进行异步请求,,如果首页异步请求比必要数据快,那么就此时就会出现报错,那么如何解决呢

1、main.js添加如下代码

//  这个页面的 Vue.prototype  就是全局变量 this , 然后在 index页面 使用  这个$onLaunched属性 他是一个promise
//  然后使用  在APP.vue 的重要参数结束以后 在给这个promise解开   ,也就是使用这个this_.$isResolve();
Vue.prototype.$onLaunched = new Promise(resolve => {
    Vue.prototype.$isResolve = resolve;
})

2   在首页添加 下列代码 并在 await之后填写业务逻辑

async onLoad(o) {

			//等待登录成功
			await this.$onLaunched;

			}

3 在app.vue的onLaunch() 里面写入必要数据的请求,并在.then里面写上this_.$isResolve()  解开首页的进程

onLaunch() {

getCode().then((result) => {
this_.$isResolve();}

因为整个逻辑两个并行的页面和一个全局变量,如何通过全局变量控制两个页面的加载顺序的我问题,我们如果简化成一个页面就好理解

    <script>
        // 一个async函数
        let d = async function () {
            // 先打印这个
            console.log('111')

            let y

            // 给x一个promise,
            let x = new Promise(resolve => {
                setTimeout(() => {
                    console.log('3333333');
                    y = resolve;
                    // 这个是个
                    y()
                }, 0)

            })

            // 然后是会穿过promise 先打印222
            console.log('222222')

            // 然后等待Promise的结果
            await x

            // 这个一定是最后调用的,因为要等待await
            console.log('44444444')
        }

        d()
    </script>

Logo

前往低代码交流专区

更多推荐