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

注意: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() //获取个人信息
		},
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,请看下面的面试题: ### HTML 1. 请解释一下 HTML 的意思 2. 请说说 HTML5 有哪些新特性 3. 什么是语义化的 HTML 4. meta viewport 是干什么用的 5. meta 有哪些常见的属性和含义 6. 请简述一下 HTML 的块级元素和行内元素的区别 7. HTML5 的新表单元素有哪些 ### CSS 1. 请简述一下 CSS 的意思 2. CSS3 有哪些新特性 3. 什么是盒模型,标准盒模型和 IE 盒模型有何不同 4. 请解释一下 margin 和 padding 5. 请简述一下 CSS 的选择器有哪些 6. 请说说 CSS 的伪类和伪元素的区别 7. 请解释一下 CSS 的浮动和清除浮动 ### JavaScript 1. 请简述一下 JavaScript 的意思 2. 请说说 ES6 有哪些新特性 3. 请简述一下 JavaScript数据类型 4. 请解释一下 JavaScript 的变量提升 5. 请说说 JavaScript 的闭包是什么 6. 请解释一下 JavaScript 的事件委托 7. 请简述一下 JavaScript 异步编程 ### Vue 1. 请简述一下 Vue 的意思 2. Vue 的双向数据绑定是如何实现的 3. 请解释一下 Vue 的 computed 和 watch 的区别 4. Vue 的生命周期有哪些,分别是什么时候触发的 5. Vue 的组件通信有哪些方式 6. Vue 的路由是如何实现的 7. 请简述一下 Vue 的指令有哪些 ### uni-app 1. 请简述一下 uni-app 的意思 2. 请说说 uni-app 的页面生命周期有哪些,分别是什么时候触发的 3. uni-app 的跨平台特性是如何实现的 4. uni-app 的组件通信有哪些方式 5. uni-app 的路由是如何实现的 6. uni-app 的微信小程序与 H5 页面的适配有何不同 7. 请简述一下 uni-app 的常见 UI 组件有哪些

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值