uni-app app.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)
			},
		})
	},

正常情况下 getOpenId方法请求成功之后 就会有openid了
但因为getOpenId方法是ajax异步的 所以首页显示了 可能getOpenId方法还没执行完,首页可能就会取不到openid
解决参考 https://blog.youkuaiyun.com/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)
				}
			},
		})
	},

注意: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()
			}
		}
	},

方法2
main.js

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

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();
					},
				});

			},

首页

	async onShow() {
			await this.$onLaunched;
			this.getUser() //获取个人信息
		},
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值