uni-app中App.vue的onLaunch函数和页面的onMounted函数异步问题的解决方案

你们好，我是金金金。

场景

我用的是uniapp+vue3

• 一般小程序都是需要登录的，登录之后获取到token以及用户信息成功后再跳转到首页，这肯定是没有问题的
  我这边的场景是：不需要登录，也就是静默登录，此时就存在一个问题，App.vue里面 根据code获取openId、用openId获取token、用token获取用户信息等一系列操作，首页index.vue里面则是对展示模块内容的一个接口调用，此时就会存在问题，因为都是异步执行的，所以有时候会发生：用户信息或者token都没拿到，首页的接口就已经执行了，造成接口401问题

排查

原因很简单：就是因为调用接口异步导致的，没有按照循序执行~想想怎么让他们同步呢？

造成error的原因

异步导致

解决

1. main.ts

• 在 app.config.globalProperties 上定义 $onLaunched 为一个新的 Promise，并将 resolve 函数赋值给 $isResolve

app.config.globalProperties.$onLaunched = new Promise(resolve => {
    app.config.globalProperties.$isResolve = resolve
})

2. pages/index/index.vue

• 首页的 onMounted 生命周期钩子中，通过 await $onLaunched 等待 $onLaunched Promise 完成

await $onLaunched

3. APP.vue

• 当 app.vue 中需要执行的初始化逻辑完成后，调用 $isResolve() 来解析 Promise，首页的接口请求会在 $onLaunched 被解析后执行，即 app.vue 的初始化逻辑完成后，这样就可以解决在获取用户信息之后再去加载首页接口

 $isResolve()

到此结束，在需要的逻辑里面按需调用即可！

测试

• 瀑布流可以很直观的看见接口的加载顺序，首页的模块接口调用在userinfo接口后执行的~即使首页模块接口调用更快也不会抢先执行

总结

接口异步调用的问题，使之同步即可

• 编写有误还请大佬指正，万分感谢。