Vue 3 中实现轮询请求逻辑复用的核心是封装自定义 Hook（如 usePolling），通过 ref 管理状态、setTimeout 递归调用防重叠、onUnmounted 自动清理，并支持手动启停、动态间隔、超时控制及条件终止。
Vue 3 中实现轮询请求的逻辑复用，核心是把「定时发起请求、错误处理、自动清理、状态控制」这些共性能力抽离成可导出、可组合、可复用的自定义 Hook。不是写死在组件里，而是封装成 usePolling 这样的函数，一处维护，多处调用。
用 Composition API 封装通用轮询 Hook
这是最推荐的方式——不依赖第三方库，纯 Vue 3 原生能力，清晰可控，便于测试和定制。
- 使用
ref管理数据、错误、加载态、是否运行中等状态 - 用
setTimeout递归调用（避免请求重叠），而非setInterval - 在
onUnmounted自动清理定时器，防止内存泄漏 - 支持手动启停、动态修改间隔、超时控制、结果条件终止（如 status === 'success'）
示例（composables/usePolling.ts）：
import { ref, onUnmounted } from 'vue'
<p>export function usePolling<T>(
requestFn: () => Promise<T>,
options: {
interval?: number
timeout?: number
stopWhen?: (data: T) => boolean
} = {}
) {
const { interval = 3000, timeout = 30000, stopWhen } = options</p><p>const data = ref<T | null>(null)
const error = ref<Error | null>(null)
const loading = ref(false)
const isRunning = ref(false)</p><p>let timer: NodeJS.Timeout | null = null
let startTime: number | null = null</p><p>const start = async () => {
if (isRunning.value) return
isRunning.value = true
startTime = Date.now()
await run()
}</p><p>const run = async () => {
if (!isRunning.value) return</p><pre class="brush:php;toolbar:false;">loading.value = true
try {
const res = await requestFn()
data.value = res
if (stopWhen?.(res)) {
isRunning.value = false
return
}
} catch (err) {
error.value = err as Error
} finally {
loading.value = false
if (isRunning.value && Date.now() - (startTime || 0) < timeout) {
timer = setTimeout(run, interval)
} else {
isRunning.value = false
}
}}
立即学习“前端免费学习笔记（深入）”；
const stop = () => { isRunning.value = false if (timer) clearTimeout(timer) }
onUnmounted(stop)
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
return { data, error, loading, isRunning, start, stop } }
配合 @vueuse/core 的 useIntervalFn 快速复用
如果项目已引入 @vueuse/core，可用 useIntervalFn 搭配手动请求控制，代码更简洁，适合轻量轮询场景。
- 它只负责「定时触发」，请求逻辑仍由你组织，职责分离清晰
- 自动绑定组件生命周期，无需手动
onUnmounted - 支持暂停/恢复、动态改间隔
用法示例：
import { useIntervalFn } from '@vueuse/core'
import { ref } from 'vue'
<p>export function useSimplePolling(requestFn: () => Promise<any>, interval = 5000) {
const data = ref(null)
const error = ref<Error | null>(null)
const isPaused = ref(false)</p><p>const execute = async () => {
if (isPaused.value) return
try {
data.value = await requestFn()
error.value = null
} catch (err) {
error.value = err as Error
}
}</p><p>const { pause, resume } = useIntervalFn(execute, interval, { immediate: false })</p><p>return {
data,
error,
isPaused,
pause,
resume,
start: () => { isPaused.value = false; resume() }
}
}用 vue-request 内置轮询实现开箱即用复用
适合中大型项目，需要统一管理请求缓存、重试、防抖、节流、轮询策略等场景。
- 一行启用轮询，自带页面隐藏暂停、失败重试、loading 状态、自动取消
- 所有轮询行为遵循同一套配置规范，便于团队协作与监控
- 返回对象天然适配模板响应式，无需额外 ref 包裹
示例：
import { useRequest } from 'vue-request'
import axios from 'axios'
<p>// 在任意组件中直接复用
const { data, loading, error, mutate, stop } = useRequest(
() => axios.get('/api/task-status'),
{
pollingInterval: 2000,
pollingWhenHidden: false,
pollingErrorRetryCount: 2,
onSuccess: (res) => {
if (res.data.status === 'done') stop()
}
}
)关键复用设计要点
真正实现“逻辑复用”，不能只复制粘贴代码，而要关注这几个设计细节：
- 参数化配置：轮询间隔、超时时间、终止条件、错误回调都应作为参数传入，不硬编码
- 状态解耦：不直接操作组件 data，而是返回 ref 对象，由调用方决定如何消费（v-if / computed / watch）
- 生命周期自治：Hook 内部完成 onUnmounted 清理，使用者无感知，避免漏清导致内存泄漏
-
可中断、可重试、可暂停：提供
start/stop/pause/resume等控制方法，满足真实业务中断需求（如用户切换 Tab、任务完成、网络异常）
