vue/uniapp 如何让页面的 onLoad 在 onLaunch 之后执行[通俗易懂]

app.vue里的onLaunch中如果有异步方法(比如:登录),返回结果可能会在页面的onLoad之后,但onLoad中的方法需要登录回调的结果。为了让页面的onLoad在onLaunch之后执行,解决方案:1.main.js添加代码Vue.prototype.$onLaunched=newPromise(resolve=>{Vue.prototype.$isResolve=resolve;})2.在App.vue的onLau

大家好,又见面了,我是你们的朋友全栈君。

app.vue里的 onLaunch 中如果有异步方法(比如:登录),返回结果可能会在页面的 onLoad 之后,但 onLoad 中的方法需要登录回调的结果。

为了让页面的 onLoadonLaunch 之后执行,解决方案:

1. main.js 添加代码

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

2. 在 App.vue 的 onLaunch 中添加代码 this.$isResolve()

onLaunch: function() { 
   
	// 登录
	uni.login({ 
   
		provider: 'weixin',
		success: (loginRes) => { 
   
			this.$axios({ 
   
				url: '/xxxx/auth',
				params: { 
   
					code: loginRes.code
				}
			}).then(res => { 
   
				try { 
   
					uni.setStorageSync('token', res.data.token);
					this.$isResolve();
				} catch (e) { 
   
					console.error(e)
				}
				
			})
		}
	});
}

3. 在页面 onLoad 中添加代码 await this.$onLaunched

async onLoad() { 
   
    // 等待登录结果返回
    await this.$onLaunched;
	
    // 处理后续业务逻辑(此时已存在token值)
    console.log(uni.getStorageSync('token'));
    this.getData();
},
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/129636.html原文链接:https://javaforall.net

(0)
上一篇 2022年4月14日 下午9:20
下一篇 2022年4月14日 下午9:40


相关推荐

  • Web前端性能优化——如何提高页面加载速度

    Web前端性能优化——如何提高页面加载速度

    2021年10月14日
    37
  • latex 公式换行的命令

    latex 公式换行的命令2019独角兽企业重金招聘Python工程师标准>>>…

    2022年6月10日
    41
  • 从“做事用人”到“用人做事”[通俗易懂]

    从“做事用人”到“用人做事”[通俗易懂]阿里张勇:从“做事用人”到“用人做事”商业管理今年十一月底,阿里巴巴进行了一年一度的组织架构调整,在这次调整中,阿里云升级成为阿里云智能;天猫升级为“大天猫”,并形成了三个事业群。12月时,阿里巴巴集团CEO张勇,在阿里青年干部培训营上,谈了他对这次组织架构升级的思考。36氪发表了张勇的讲话全文,我们从中为你选取了他的5个观点。第一,从“做事用人”到“用人做事”。这是马云给张勇的…

    2025年6月16日
    6
  • 网易邮箱问候语

    网易邮箱问候语

    2021年11月17日
    80
  • Switch case break/ default总结

    Switch case break/ default总结1 写 switchcase 语句不加 break 会怎样 switchcase 语句犯得错误 会犯这种错误 都是基础不牢固导致的 但是这样的错误却花费了我数小时去 debug 想来真是很让人郁闷 看一段代码 不想看代码直接看后面总结 privatevoid nbsp arrange nbsp nbsp nbsp nbsp switch nbsp direction nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp case nbsp U nbsp nbsp nbsp nbsp nbsp case R nbsp nbsp

    2026年3月17日
    2
  • 查看webpack版本命令_webpack阮一峰

    查看webpack版本命令_webpack阮一峰想着搞一下webpack的构建优化,网上看到一些方法说是要webpack4及以上的才能用。然后就要看看是啥版本来着——查看当前项目的webpack版本1.命令行执行npxwebpack-v(最方便啦)因为webpack是局部安装,要进入依赖包执行webpack的命令才有效,直接webpack-v会被认为命令无效。使用npm包执行器npx可以自动找到对应的包执行命令(一般安装了npm会自动安装npx)2.在package.json添加script命

    2022年8月10日
    50

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号