uni-app app.vue中 onLaunch请求接口 异步导致首页取不到数据_vue onlaunch

// app.vue
onLaunch: function () {
		uni.login({
			success: async (res) => {
				const { data } = await getOpenId(res.code)
				uni.setStorageSync('session_key', data.session_key)
				uni.setStorageSync('openid', data.openid)
				this.getRegister(data.openid)
			},
		})
	},
1
2
3
4
5
6
7
8
9
10
11

正常情况下 getOpenId方法请求成功之后 就会有openid了
但因为getOpenId方法是ajax异步的 所以首页显示了 可能getOpenId方法还没执行完，首页可能就会取不到openid
解决参考 https://blog.csdn.net/z291493823/article/details/121215584

目前我这边是使用了两种方法
方法1

// app.vue
onLaunch: function () {
		uni.login({
			success: async (res) => {
				const { data } = await getOpenId(res.code)
				uni.setStorageSync('session_key', data.session_key)
				uni.setStorageSync('openid', data.openid)

				if (this.globalData.loginCallback) {
					this.globalData.loginCallback(data.openid)
				}
			},
		})
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意：this.globalData是app.vue中的一个全局变量，直接在app.vue页面中定义的
this.globalData.loginCallback则不需要在this.globalData中定义

在首页中判断openid是否存在，不存在则定义一个app.globalData.loginCallback 回调方法

onLoad() {
		this.getBanner()

		if (uni.getStorageSync('openid')) {
			this.getUser()
		} else {
			const app = getApp()
			const { globalData } = app
			globalData.loginCallback = (res) => {
				uni.setStorageSync('openid', res)
				this.getUser()
			}
		}
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

方法2
main.js

// 解决中onLaunch异步方法与onLoad执行顺序问题
Vue.prototype.$onLaunched = new Promise((resolve) => {
	Vue.prototype.$isResolve = resolve
})
1
2
3
4

app.vue

//登录
			login() {
				uni.login({
					success: async res => {
						let data = await getOpenid(res.code);
						uni.setStorageSync('openid', data.openid);
						uni.setStorageSync('session_key', data.session_key);
						this.$isResolve()
						this.getList();
					},
				});

			},
1
2
3
4
5
6
7
8
9
10
11
12
13

首页

	async onShow() {
			await this.$onLaunched;
			this.getUser() //获取个人信息
		},
1
2
3
4