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()
    })
})

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