uniapp-解决onLaunch onLoad异步问题

uniapp onLaunch onLoad如何正确执行逻辑

在uniapp中,onLaunch onLoad如何正确同步执行逻辑这个问题非常常见特别是 进入分享页面的时候 ,下面简单介绍一个例子

onLaunch生命周期中进行token请求,页面中调用对应的接口,这时候就会存在一个问题,页面去请求接口的时候token还没获取到,导致接口报错401

解决方式

搜索引擎中有几种解决方案,其中有开发者开发了自定义钩子函数的npm包,包括一些vue2的原型修改onLaunch为promise之类的,这些方法都是可以解决问题的,下面介绍一个比较简单的解决方式

使用uni.$emit解决

js 复制代码
// app.vue
onLaunch(async()=>{
    await getToken()
    uni.$emit('onReady')
)

// 页面
onLoad(()=>{
    if(有token){ // 也可以设置一个全局变量记录是否执行onReady,例如globalData.isReady
        loadData()
        return
    }
    uni.$once('onReady',()=>{
        // 监听获取完token后执行页面逻辑
        loadData()
    })
})
  1. uni.$once 是uniapp内置提供的监听方法,监听一次后自动销毁

2. uni.$emit 全局事件 页面监听

使用单例模式解决

js 复制代码
// 可以使用pinia封装 这里简单实现tokenPromise.js
let tokenPromise = null
export function initToken(){
    if(tokenPromise) return tokenPromise
    tokenPromise= new Promise(async(resolve)=>{
        // 获取token
        const token = await getToken()
        // 返回token
        uni.setStoreage("token",token)
        resolve(token)
    })
}

// app.vue
onLaunch(async()=>{
    await initToken()
)
// 页面
onLoad(()=>{
   await initToken()
   loadData()
})

解释:该方式在onLaunch执行获取token 并执行获取token的方法,页面执行initToken的时候如果执行完会直接resolve(token),如果没执行完会等待initToken执行完 这样的方式既不会请求多个token接口,且很好的解决了onLaunch onLoad正确执行逻辑的问题

总结

使用uni全局事件的方式可以实现进入指定页面onLaunch跟onLoad生命周期的问题,这是一种简单的解决方式特别是在vue3中,使用单例模式的方法代码也没多少,关键是要有逻辑才能解决问题,解决方案有很多,对应适用场景使用应对应的逻辑处理

相关推荐
RainbowSea21 分钟前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴27 分钟前
笨方法学python -练习14
java·前端·python
Mintopia34 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖38 分钟前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia44 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农1 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤1 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo2 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html