VueHooks Plus 中 refreshDeps 与 pollingInterval 同时使用的无限请求问题解析

问题背景

在 VueHooks Plus 1.8.9 版本中，开发者反馈了一个关于 useRequest 钩子的重要问题：当同时配置 refreshDeps 和 pollingInterval 参数时，会出现接口无限请求的情况，而设置的轮询间隔时间完全失效。

问题现象

具体表现为：

{
  refreshDeps: true,
  pollingInterval: 1000 * 60 * 5,  // 5分钟
  pollingWhenHidden: false
}

在这种配置下，应用会持续不断地发送请求，完全忽略了设置的5分钟轮询间隔。

技术原理分析

VueHooks Plus 的 useRequest 钩子提供了两种数据更新机制：

1. refreshDeps：依赖刷新机制，当依赖项发生变化时自动重新发起请求
2. pollingInterval：轮询机制，按照固定时间间隔自动刷新数据

这两种机制本应协同工作，但在实现上存在一个关键缺陷：timeRef.value = setTimeout() 操作被 watchEffect 监听到了，导致形成了一个无限循环的刷新操作。

问题根因

深入分析发现，问题的核心在于响应式系统的副作用处理：

1. 轮询机制内部使用 setTimeout 设置定时器
2. 这个定时器设置操作被包装在响应式变量 timeRef 中
3. refreshDeps 的 watchEffect 监听到了 timeRef 的变化
4. 每次 timeRef 变化都会触发重新请求
5. 请求完成后又触发新一轮轮询
6. 这样就形成了一个无限循环

解决方案

开发团队在 2.2.0 版本中修复了这个问题。主要修复思路是：

1. 隔离轮询定时器的设置与响应式系统
2. 确保 timeRef 的变化不会触发不必要的依赖更新
3. 保持两种机制各自独立工作而不互相干扰

最佳实践建议

对于需要使用这两种机制的场景，建议：

1. 确保使用最新版本的 VueHooks Plus (2.2.0+)
2. 明确区分依赖刷新和轮询的使用场景
3. 对于数据实时性要求高的场景使用轮询
4. 对于依赖外部状态变化的场景使用 refreshDeps
5. 必要时可以组合使用，但要充分测试

总结

这个案例展示了响应式编程中副作用处理的复杂性。VueHooks Plus 团队通过及时修复这个问题，提升了 useRequest 钩子的稳定性和可用性。开发者在使用这类高级功能时，应当注意版本兼容性，并充分理解各参数间的交互影响。