uni-app 中实现 onLaunch 异步回调后执行 onLoad 最佳实践

最新推荐文章于 2024-08-12 14:18:40 发布
最新推荐文章于 2024-08-12 14:18:40 发布
阅读量2.5k 收藏 8
点赞数
分类专栏： 计算机 文章标签： 计算机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45562973/article/details/124938477
版权
本文介绍了在uni-app中解决onLaunch异步回调和onLoad同步执行的问题，提出两种解决方案：一是利用Promise改造onLaunch；二是借助uni-simple-router的全局前置守卫事件，实现更灵活的数据获取。推荐使用后者，因为只需在route.js配置，避免了每个页面额外的代码添加。
摘要由CSDN通过智能技术生成

🚀 优质资源分享 🚀

学习路线指引（点击解锁） 知识定位 人群定位
🧡 Python实战微信订餐小程序 🧡 进阶级 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

前言

好久没写博客了，由于公司业务需要，最近接触uiapp比较多，一直想着输出一些相关的文章。正好最近时间富余，有机会来一波输出了。

问题描述

在使用 uni-app 开发项目时，会遇到需要在 onLaunch 中请求接口返回结果，并且此结果在项目各个页面的 onLoad 中都有可能使用到的需求，比如微信小程序在 onLaunch 中进行登录后取得 openid 并获得 token，项目各页面需要带上该 token 请求其他接口。

问题原因

在onLaunch 中的请求是异步的，也就是说在执行 onLaunch 后页面 onLoad 就开始执行了，而不会等待 onLaunch 异步返回数据后再执行

最低0.47元/天 解锁文章
洛蕾
关注
专栏目录
uniapp中onLaunch与onLoad执行先后问题
yi754808的博客
12-14 2592
uniapp中，app.vue里的onLaunch中如果有异步方法，比如登录方法，返回结果可能会在页面的 onLoad 之后，为了让页面的 onLoad 在 onLaunch 之后执行可以做以前解决方案： 第一步：在main.js添加如下代码： Vue.prototype.$onLaunched = new Promise(resolve => { Vue.prototype.$isResolve = resolve }) 第二步：在 App.vue 的 onLaunch 中的网络...
uniapp 应用启动onLaunch方法
记录本人工作中遇到的问题、经验总结以及分享。
04-12 1万+
这个方法必须在你的业务执行完毕后再执行，如小程序默认登录。注意onload要添加async，否则编译不过去。
uni-app中App.vue的onLaunch函数和页面的onMounted函数异步问题的解决方案
最新发布
Yjx的博客
08-12 662
接口异步调用的问题，使之同步即可。
uni-app中App.vue的onLaunch函数和页面的onLoad函数异步问题的解决方案（Vue2/Vue3）
ironprosper的博客
10-31 3829
在页面的 onLoad 中增加代码 await this.$onLaunched，注意onload要添加async。在 App.vue 的 onLaunch 所有业务逻辑执行完毕后增加代码 this.$isResolve()1 修改 main.js。2 修改 App.vue。
uniapp中 APP.vue中的onLaunch执行后 页面中的onload。
~~~
04-28 1019
onload是页面生命周期，理论上应该先执行onLaunch 后执行页面生命周期onLoad，实际上在执行onlaunch的同时，也会执行onLoad生命周期，可能会导致一些数据加载问题。onLaunch 是应用生命周期，初始化完成时触发（全局只触发一次），
UniApp 微信小程序：在 onLaunch 中等待异步方法执行完成后，再调用页面中的接口
morecccc的博客
04-16 1857
最近遇到了一个问题：在 App.vue 中的onLaunch中调用登录接口时，由于异步登录尚未完成就调用了 index 页面的接口，导致 token 异常。如何确保页面在App中的onLaunch执行完毕后再继续执行呢？在网上查阅了一些资料，发现大多数解决方案涉及登录状态设置、页面通过轮询或消息通知等方式等待状态，这些方法都不太理想。解决方案：要确保在App.vue中的onLaunch调用登录接口完成后再调用index的其他接口，可以使用 Promise 来控制异步操作的执行顺序。
uniapp应用生命周期 onLaunch 方法改同步，再调用页面生命周期
ltc_Yan的博客
05-24 2382
uniapp app.vue页面生命周期改为同步
uni-app开发总结
2301_77865212的博客
05-22 357
原因：原生的uni-tabbar在手机端app没有完全隐藏，导致遮住了自定义的底部导航栏解决：把uni-tabbar隐藏就行了。
uni-app基础知识点
qq_56045326的博客
06-06 4051
uni-app知识点详解
微信小程序和uni-app面试高频知识点
qq_53694927的博客
11-27 869
微信小程序和uni-app面试高频知识点
微信小程序中使用Async-await方法异步请求变为同步请求方法
10-17
而异步请求则是非阻塞的，即代码的执行不会被请求所阻塞，会在请求完成后的某个时刻异步地调用回调函数。 在JavaScript中，为了处理异步操作并以同步方式编写代码，ES7引入了async-await语法。Async-await允许...
uni-app：App.vue中onLaunch请求接口异步，首页onLoad获取不到数据
m0_60189088的博客
04-22 826
最近在开发uniapp的h5项目，按着正常的逻辑来说启动h5页面，先触发App.vue中的onLaunch生命周期，随后触发onLoad。但其实不是，在触发onLaunch的同时也在触发要进入页面的onLoad，所以导致在onLoad里面拿不到onLaunch里的数据。
uniapp中onLaunch和onload的先后执行顺序
weixin_46746389的博客
08-02 9432
uniapp中onLaunch和onload的先后执行顺序 onLaunch与onload分别是APP生命周期与页面生命周期，理论上应该先执行onLaunch 后执行页面生命周期onLoad。然而实际上并非如此，在执行onlaunch的同时，也会执行onLoad生命周期，而在实际开发中往往需要优先执行onlaunch后再执行onLoad，因此可以使用当前方法解决。 一、main.js添加如下代码？ 代码如下（示例） // 让页面的 onLoad 在 onLaunch 之后执行 Vue.prototype.$
uniapp 先执行onLaunch，再执行onLoad
LP的博客
08-10 2930
uni-app 中利用 Promise 实现 onLaunch 异步回调后执行 onLoad
uniapp onLaunch和onLoad执行顺序，页面返回会出现问题，一直加载中
qq_42440919的博客
03-27 3995
App.vue什么时候执行，第一次进入该系统执行，如果是该系统自己页面返回自己页面，不会重新进入app.vue，但是page.vue会触发onLoad（安卓手机）。所以就会出现一个问题，就是返回的时候，page.vue中触发了onload，但不进去app.vue，await this.$onLaunched就会一直等待。首先，安卓手机，页面返回（自己系统页面返回自己系统页面），不会进去app.vue，但是会触发页面page.vue的onload。page.vue具体页面里面。
uniapp 应用启动onLaunch方法，改为同步，执行后再执行页面加载onLoad方法
热门推荐
yfx000的专栏
08-23 3万+
问题描述 app.vue里的onLaunch中如果有异步方法，返回结果可能会在页面的 onLoad 之后，为了让页面的 onLoad 在 onLaunch 之后执行，使用以下解决方案 1、main.js添加如下代码 Vue.prototype.$onLaunched = new Promise(resolve => { Vue.prototype.$isResolve = resolve }) 2、在 App.vue 的onLaunch中增加代码this.$isResol...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值