uniapp小程序onlaunch与onload的矛盾

发布时间 2023-09-01 11:02:22作者: bkk2h5l0

起因:我们的项目是内嵌刀他人项目里的,从url中拿到用户token,然后以此请求我们自己的token,在onlaunch中请求,与此同时在onload中也在请求数据,onload中请求需要请求头中带token,此时onlaunch中还没有请求结果,不可能存储token

解决方法:小程序 onLaunch 与 onLoad 异步问题的解决方案_onlaunch onload_ZionHH的博客-CSDN博客

第一步:在 main.js 中增加如下代码:

Vue.prototype.$onLaunched = new Promise(resolve => {
Vue.prototype.$isResolve = resolve
})

第二步:在 App.vue 的 onLaunch 中增加代码 this.$isResolve(),具体如下:

onLaunch () {
// #ifndef H5
uni.login({
success: loginRes => {
// #ifdef MP-WEIXIN
login({ // 该接口为我们自己写的获取 openid/token 的接口,请替换成自己的
appId: 'wx1234567890',
code: loginRes.code
}).then(res => {
try {
console.info(res.object.token)
uni.setStorageSync('mcToken', res.object.token)
this.$isResolve()
} catch (e) {
console.error(e)
}
})
// #endif
}
})
// #endif
}

第三步:在页面 onLoad 中增加代码 await this.$onLaunched,具体如下:

async onLoad(option) {
await this.$onLaunched

let token = ''
try {
token = uni.getStorageSync('mcToken')
} catch(e) {
console.error(e)
}

// 下面就可以使用 token 调用其他相关接口
}