uniapp app.vue加载完成后运行首页

最新推荐文章于 2024-06-06 11:23:26 发布

Technology_hands

最新推荐文章于 2024-06-06 11:23:26 发布

阅读量3k

点赞数 6

文章标签： uni-app

本文链接：https://blog.csdn.net/technology_hands/article/details/130841631

版权

文章介绍了如何通过在Vue.prototype上设置全局Promise来控制app.vue和首页的加载顺序。在app.vue的onLaunch中处理必要数据请求，并在完成后解开全局Promise，使得首页在数据加载完毕后再执行异步操作，避免因顺序错误导致的报错。

摘要由CSDN通过智能技术生成

由于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>