likes
comments
collection
share

如何给vueuse库提PR

作者站长头像
站长
· 阅读数 54

一、背景

最近在H5中进行频繁的路由跳转,当次数达到30次左右时,浏览器控制台就会出现一个节流的警告。这时候再次点击路由跳转时,页面会直接崩溃退出。排查后发现是vueuse库中useUrlSearchParams在异步任务中频繁使用造成的,后面解决完后就给vueuse提了一个PR。下面就对当时的排查手段做一次复盘,以及如何去规避这个问题。

二、问题与解决

1、问题定位

  • 通过定位页面跳转时,频繁调用的代码片段,问题初步锁定到了到了axios请求拦截器的useUrlSearchParams 上。
  • 查看useUrlSearchParams的源码,最终定位到window.history.replaceState这个浏览器的API上。源码链接

如何给vueuse库提PR

  • 但是window.history.replaceState也算比较常见的一个API,平常使用并没有什么问题,而有问题的代码是在axios的请求拦截器上使用的。
  • 查看axios拦截器的源码,可以很清晰的看到,第一个作为入参的函数,是在Promise.resolve().then()里面执行的,是一个微任务。axios源码链接

如何给vueuse库提PR

  • 后面再写一个demosetTimeout中执行,发现宏任务也会出现问题。
  • 综上可以得出重现问题的条件:异步任务 + window.history.replaceState + 频繁调用

2、解决方案

知道问题所在其实就比较好解决了。有两种方式可以规避:

  1. 不在异步任务中使用useUrlSearchParams。比如前面的例子可以改为在同步代码中使用useUrlSearchParams拿到对应的值,然后在axios拦截器中读取这个变量。
  2. 如果确定自己在当前场景下,无需执行window.history.replaceState来修改当前历史实体的URL来响应用户的动作的话,那就不执行vueuse源码中这个write的操作就可以了。想着可能后面还是会有人踩同样的坑,干脆就提了个PR。

三、提PR

代码的改动很小,大部分的时间是花在写pr的描述、重现问题的步骤、重现的demo上了。提完第二天antfu在review完代码给出一些命名规范的修改建议后,就合并了这个PR。

如何给vueuse库提PR

四、其他

本来以为作者是会发v9.1.2这个小版本的,因为都是新增无破坏性变更的特性。后面写这个总结的时候,刚好看到作者发布了新的版本v9.2.0,不过也只有一个破坏性变更,还是可以比较放心地去升级的。如何给vueuse库提PR

转载自:https://juejin.cn/post/7158356139699585055
评论
请登录