【工作实践-01】实验室APP端—异步

一、遇到问题：异步

问题：(1) app端刚安装(即本地存储信息为空，用户信息也为空)；(2) 登陆后在生命周期onShow中直接获取用户信息会存在获取信息为空的情况（用户信息使用VUEX管理）；

问题原因：异步（获取用户信息和菜单信息需要请求接口数据），异步问题导致onShow()中获取的菜单列表为空

问题解决：async ,await

onShow() {
            console.log(this.$store.state.User.menuInfo) // app端在刚安装的情况下（本地存储信息也为空），获取值为空
			this.getMenuList()
			this.nowDate = this.$dayjs().format('YYYY-MM-DD')
		},
methods: {
            // 获取用户信息和菜单列表需要请求接口获取数据，此时就存在异步问题，用async、await来解决异步问题
			async getMenuList() {
				let selectedMenu = []
				// app端刚安装时即本地存储中用户信息为空时，会存在获取不到用户信息的情况
                // 因此使用await在等待获取用户信息和菜单列表后再进行后续菜单过滤操作
				Object.values(this.$store.state.User.user).length ? '' : await this.$store.dispatch('setUserInfoAction')
				// 若用户没有选择则默认选择三个应用进行展示：目前是数据报表、评估管理和实验室预约三个菜单，若已选择，按用户选择展示
				if (uni.getStorageSync('selectedMenu').length) {
					selectedMenu = uni.getStorageSync('selectedMenu')
				} else {
					// await this.$store.dispatch('setUserInfoAction')
					selectedMenu = ['chart', 'appraise', 'lab-reserve']
					uni.setStorageSync('selectedMenu', selectedMenu)
				}
				this.selectedMenu = this.showMenu.filter(item => selectedMenu.includes(item.key)).concat(this.showFooterMenu
					.filter(item => selectedMenu.includes(item.key)))
			},
}

二、解决异步问题的方法

 1.Promise

         如以下代码，也是在该项目中遇到的，在VPN认证成功之后才能进行余下的登录操作，此时就需要把VPN认证做成一个异步函数。

function VPNSubmit(username, password) {
	return new Promise((resolve, reject) => {
		if (getAuthStatus() !== "SFAuthStatusAuthOk") {
			uni.showLoading({
				title: 'VPN正在认证，请稍候...'
			})
			VPNObj.startPasswordAuth({
				h: 'https://a.sslvpn.hbjd.edu.cn',
				u: username,
				p: password
			}, result => {
				uni.hideLoading();
				uni.showModal({
					title: '提示',
					content: result.result,
					showCancel: false
				});
				if (JSON.parse(result.SFBaseMessage).mErrCode === 1000) {
					resolve(true)
				} else {
					reject('error')
				}
			})
		} else {
			/**
			 * 已认证
			 */
			uni.showToast({
				title: 'VPN已认证！',
				duration: 2000,
			});
			resolve(true)
		}
	})
}

 2. async await

        例子参考以上问题解决部分 

3. gengerator函数（不常用）

        鄙人才疏学浅，请参考最全前端异步解决方案【推荐收藏】 - 掘金 (juejin.cn)