theme: nico
你们好,我是金金金。
场景
我用的是
uniapp
+vue3
- 一般小程序都是需要登录的,登录之后获取到
token
以及用户信息成功后再跳转到首页,这肯定是没有问题的
我这边的场景是:不需要登录,也就是静默登录,此时就存在一个问题,App.vue
里面 根据code
获取openId
、用openId
获取token
、用token
获取用户信息等一系列操作,首页index.vue
里面则是对展示模块内容的一个接口调用,此时就会存在问题,因为都是异步执行的,所以有时候会发生:用户信息或者token
都没拿到,首页的接口就已经执行了,造成接口401
问题
排查
原因很简单:就是因为调用接口异步导致的,没有按照循序执行~想想怎么让他们同步呢?
造成error的原因
异步导致
解决
- main.ts
- 在
app.config.globalProperties
上定义$onLaunched
为一个新的Promise
,并将resolve
函数赋值给$isResolve
app.config.globalProperties.$onLaunched = new Promise(resolve => {
app.config.globalProperties.$isResolve = resolve
})
- pages/index/index.vue
- 首页的
onMounted
生命周期钩子中,通过await $onLaunched
等待$onLaunched Promise
完成
await $onLaunched
- APP.vue
- 当
app.vue
中需要执行的初始化逻辑完成后,调用$isResolve()
来解析Promise
,首页的接口请求会在$onLaunched
被解析后执行,即app.vue
的初始化逻辑完成后,这样就可以解决在获取用户信息之后再去加载首页接口
$isResolve()
到此结束,在需要的逻辑里面按需调用即可!
测试
- 瀑布流可以很直观的看见接口的加载顺序,首页的模块接口调用在
userinfo
接口后执行的~即使首页模块接口调用更快也不会抢先执行
总结
接口异步调用的问题,使之同步即可
- 编写有误还请大佬指正,万分感谢。