从前有匹马叫代码
心若没有栖息的地方,到哪里都是流浪

简单模拟,我有pages/index与pages-work/job-detail页面,pages/index 页面放的是job列表,

今天发现,从job-detail页面分享页面到聊天,然后从聊天点进去,再返回到index页面,数据列表没有加载,

 开始排查问题之后发现,直接从聊天页面进入小程序是优先加载该页面所在的包的内容,因为我这里是分包,所以主包没有优先加载,也就是说Index页面没有被加载,那么这就发现问题了,我才用的uni helper开发的,因为App.vue onLunch事件,异步获取token更新token,然后通过发布订阅来触发发布事件,index页面监听到用户信息更新之后便会去加载列表数据,那么,这里的问题就是onLunch事件,emit的事件,由于index页面没有被加载导致没有监听到事件,所以进来之后就是空的状态了,然后又因为onLunch 里异步获取token更新用户信息,那么在index的onLoad 中是没办法确保拿到token的,再因为index页面有watch监听userInfo,那么就不能使用常规的手段去处理,原因如下:

1. 因为Promise并行导致不能100%获取token,会导致接口失败弹窗

2. 造成list接口重复调用

解决方案:

 代码模拟展示如下:


const userStore = useUserStore()
const { userInfo, choosePreferenceDone } = toRefs(userStore)
// 处理分享进来不会刷新首页岗位列表的问题
const isLifeCycleRun = ref(true)
const lifeRunStartSeconds = ref(0)

watch(userInfo, () => { if (isLifeCycleRun.value) return if (Date.now() - lifeRunStartSeconds.value < 2000) { console.log('重复的请求,规避掉') return }; nextTick(() => { emitter.emit('home-refresh') }) }) // 模拟监听storage的事件 function onStorageChange(callback: () => void) { let ms = 0 function loop() { if (uni.getStorageSync('TOKEN')) { callback() return } if (ms >= 2000) { console.log('error:获取token超时过2S') return } ms += 100 console.log('获取token...', ms) setTimeout(loop, 100) } loop() } onLoad(async () => { lifeRunStartSeconds.value = Date.now() listenRefresh() onStorageChange(() => { emitter.emit('home-refresh') isLifeCycleRun.value = false }) })

 

posted on 2024-12-18 16:30  从前有匹马叫代码  阅读(9)  评论(0编辑  收藏  举报