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中,使用单例模式的方法代码也没多少,关键是要有逻辑才能解决问题,解决方案有很多,对应适用场景使用应对应的逻辑处理

相关推荐
拾光拾趣录2 分钟前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国2 分钟前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器
2025年一定要上岸9 分钟前
【pytest高阶】源码的走读方法及插件hook
运维·前端·python·pytest
姑苏洛言13 分钟前
答题抽奖活动小程序技术复盘
前端
砖头拍死你1 小时前
51单片机如何使用printf打印unsigned long的那些事
java·前端·51单片机
用户1512905452201 小时前
css —pointer-events属性_css pointer-events
前端
帅夫帅夫1 小时前
Axios 入门指南:从基础用法到实战技巧
前端
云边散步1 小时前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端
讨厌吃蛋黄酥1 小时前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
噔噔4281 小时前
使用webworker优化大文件生成hash的几种方式
前端