前言
大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~
背景
事情是这样的,我的组员在写一个项目,项目里有一个 Home.vue 页面,大概结构是这样,Home.vue 就是本项目的首页,项目初始化后加载的顺序是 App.vue -> Home.vue
在 App.vue 加载的时候,项目需要去请求本项目所需要使用到的字典,这部分逻辑写在了 Pinia 中,大概代码如下
接着会在 App.vue 的 onMounted 中去执行 setup 方法,去请求所有字典,这应该也是很多项目中初始化数据的方式~
接着,在 Home.vue 初始化的时候,需要去使用这些字典去完成某些操作,且只是初始化时需要完成这个操作
我们到控制台中看到,确实能获取到所有字典,那就说明没问题了吗?????
生产事故
问题来了,昨天服务器不知道咋的,字典接口响应很慢,差不多有2秒,我们可以来模拟一下,看看什么效果,我这里使用 setTimeout 来模拟请求2秒
好,现在来看看 Home.vue 里输出了什么
完蛋,Home.vue 初始化时拿不到数据,做不了对应操作,在发版日的晚上12点的时候,测试那边反馈了这个 BUG,我马上赶过去看了一下,马上就看出了问题所在,其实很多人也能看出来
因为请求太久了,导致 Home.vue 在 onMounted 时拿不到数据,执行不了后续操作,导致页面 BUG
解决问题
我并没有急,我让我的组员自己想想应该怎么解决,锻炼一下他解决问题的能力,他觉得加个 watch 是不是就可以了!!!
但是可惜的是,并不会触发监听,只能换一种办法,他查了一下百度,说可以用 Pinia 的 $subscribe 方法,就可以监听 Pinia 数据的变化了~
看看效果,确实能监听到变化,但是变化了几次就会执行几次啊,他说那就用防抖去做。。。。
我说防抖也有问题啊。。比如我们只需要 setup 执行后引起的变化监听,而不需要其他,就比如这个 otherSetup 也会引起变化监听,但我们并不想要这次变化
这种写法的不确定性太大了,而且不太合理,肯定不能这么写啊!!!
巧用 Promise
最后还是我帮他解决的,我觉得问题有两个:
- 1、组员在做项目的时候没考虑兜底
- 2、组件的基础不够扎实
在做这种需求的时候肯定要考虑到请求响应慢的时候的兜底啊,不能想当然。再有就是基础不够扎实,这种场景一看就可以使用 Promise 去兜底
我先封装一个函数,这函数返回两个东西
- readyResolve: 一个resolve函数
- onReady: 接收回调函数,只有在readyResolve执行后才会执行
接着回到 Pinia 文件中,首先将 onReady 暴露出去
接着在 setup 执行完的时候去执行 readyResolve 函数,为了提高可读性,我这里使用 Promise.all 代替之前的写法
然后到 Home.vue 页面中,只需要往 onTestStoreSteuped 中传回调函数即可
最终达到了想要的效果,无论请求多久,Home.vue 中的操作始终能在请求之后去执行
而且这样做的好处就是,无论你有多少页面需要使用请求后的数据,都可以往 onTestStoreSteuped 中传回调,请求完都会一一执行的~
通过这次的生产事故,我告诫组员们,平时学的东西要在开发项目中想一下怎么应用,而不是只是死记硬背,没有实践,那么这样只会是纸上谈兵罢了,没啥卵用,应付应付面试可能可以,做项目写的代码质量不会高的~
结语 & 加学习群 & 摸鱼群
我是林三心
- 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手;
- 一个偏前端的全干工程师;
- 一个不正经的掘金作者;
- 一个逗比的B站up主;
- 一个不帅的小红书博主;
- 一个喜欢打铁的篮球菜鸟;
- 一个喜欢历史的乏味少年;
- 一个喜欢rap的五音不全弱鸡
如果你想一起学习前端,一起摸鱼,一起研究简历优化,一起研究面试进步,一起交流历史音乐篮球rap,可以来俺的摸鱼学习群哈哈,点这个,有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点