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

相关推荐
杨进军15 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW30 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字36 分钟前
Kotlin lazy 委托的底层实现原理
前端
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端