## 引言在现代Web应用中，实时数据更新是一个常见需求，在AI场景下会用到很多。虽然WebSocket是实现实时通信的理想选择，但在某些情况下，轮询（Polling）仍然是一种简单有效的替代方案。本文将介绍一个强大的Vue 3组合式函数`usePoller`，它提供了一种优雅的方式来处理轮询请求，并且包含了错误重试、指数退避等高级特性。 ## usePoller的核心功能 `usePoller`是一个专为Vue 3设计的组合式函数，它封装了轮询的复杂逻辑，提供了以下核心功能： 1. **定时发送请求**：按照指定的时间间隔自动发送请求 2. **智能错误处理**：内置错误重试机制，支持指数退避策略 3. **灵活的配置选项**：支持立即执行、最大重试次数等配置 4. **生命周期管理**：组件卸载时自动清理资源 5. **状态监控**：提供轮询状态的实时反馈 ## usePoller源码 ```ts import { onScopeDispose, ref } from 'vue' /** * 请求函数类型定义 * @template T 响应数据类型 * @template P 请求参数类型 */ export type RequestFunction = (params?: P) => Promise /** * 回调函数类型定义，用于处理成功的响应 * @template T 响应数据类型 */ type CallbackFunction = (response: T) => void /** * 错误回调函数类型定义 * 返回 true 表示继续重试，false 表示停止轮询 */ type ErrorCallbackFunction = (error: any) => boolean | Promise /** * 停止回调函数类型定义 * @param reason 停止原因：'error'(错误)、'manual'(手动)、'max_retries'(达到最大重试次数)、'component_unmounted'(组件卸载) * @param error 当停止原因为错误时，提供错误对象 */ type StopCallbackFunction = (reason: 'error' | 'manual' | 'max_retries' | 'component_unmounted', error?: any) => void /** * usePoller - 一个用于处理轮询请求的Vue组合式函数 * * 功能： * - 定时发送请求并处理响应 * - 支持错误重试机制，包括指数退避策略 * - 支持自定义错误处理 * - 提供轮询状态监控 * - 组件卸载时自动清理 * * @template T 响应数据类型 * @template P 请求参数类型，默认为void * * @returns {Object} 包含poll和stop方法以及isPolling状态的对象 * * @example * // 基本使用 * const { poll, stop } = usePoller() * * poll( * fetchData, // 请求函数 * 5000, // 轮询间隔(毫秒) * handleResponse, // 响应处理回调 * { id: '12345' }, // 请求参数 * { * immediate: true, // 是否立即执行第一次请求 * maxRetries: 3, // 最大重试次数 * onError: (error) => { * // 根据错误类型决定是否继续重试 * return error.status === 503 // 只有服务暂时不可用时才重试 * }, * onStop: (reason, error) => { * // 处理轮询停止事件 * console.log(`轮询已停止，原因: ${reason}`, error) * } * } * ) * * // 手动停止轮询 * stop() */ export function usePoller() { const interval = ref(1000) const timer = ref | null>(null) const callback = ref | null>(null) const errorCallback = ref(null) const stopCallback = ref(null) const request = ref | null>(null) const doImmediate = ref(false) const maxRetries = ref(3) const isPolling = ref(false) // 轮询状态标志 let retryCount = 0 let requestParams: P | undefined let lastError: any = null /** * 停止轮询 * @param reason 停止原因 */ const stopPolling = (reason: 'error' | 'manual' | 'max_retries' | 'component_unmounted' = 'manual'): void => { if (timer.value) { clearInterval(timer.value) timer.value = null } const wasPolling = isPolling.value isPolling.value = false // 设置轮询状态为停止 retryCount = 0 // 只有在之前正在轮询的情况下才触发回调 if (wasPolling && stopCallback.value) { stopCallback.value(reason, reason === 'error' ? lastError : undefined) } } /** * 重试函数，处理请求失败的情况 * @param error 错误对象 * @returns 是否继续轮询 */ const retry = async (error: any): Promise => { // 保存最后一次错误 lastError = error // 检查轮询是否已停止 if (!isPolling.value) { return false } // 如果有错误回调，让用户决定是否继续重试 if (errorCallback.value) { const shouldRetry = await errorCallback.value(error) if (!shouldRetry) { return false // 不再重试，外部会处理停止轮询 } } if (retryCount < maxRetries.value) { retryCount++ // 改进的指数退避策略: 2^retryCount * 500ms 并添加随机抖动 const backoffTime = Math.min(1000 * Math.pow(2, retryCount - 1) + Math.random() * 1000, 30000) await new Promise(resolve => setTimeout(resolve, backoffTime)) // 再次检查轮询是否已停止（可能在等待期间被停止） if (!isPolling.value) { return false } if (request.value && callback.value) { try { const response = await request.value(requestParams) callback.value(response) return true } catch (error) { console.error('Error during retry:', error) return retry(error) } } } else { console.error('Max retry attempts reached') // 达到最大重试次数，通知外部 stopPolling('max_retries') // 如果没有错误回调，则在达到最大重试次数后抛出错误 if (!errorCallback.value) { throw error } return false // 达到最大重试次数，外部会处理停止轮询 } return false } /** * 启动轮询 */ const start = async (): Promise => { stopPolling() // 先停止之前的轮询 isPolling.value = true // 设置轮询状态为启动 lastError = null // 重置错误 // 如果设置了立即执行，则立即发送第一次请求 if (doImmediate.value && request.value && callback.value) { try { // 检查轮询是否已停止 if (!isPolling.value) { return } const response = await request.value(requestParams) callback.value(response) } catch (error) { console.error(error) const shouldContinue = await retry(error) if (!shouldContinue) { stopPolling('error') // 如果不应继续重试，停止轮询 return // 直接返回，不启动定时器 } } doImmediate.value = false } // 再次检查轮询是否已停止（可能在immediate执行期间被停止） if (!isPolling.value) { return } // 设置定时器，开始轮询 timer.value = setInterval(async () => { // 检查轮询是否已停止 if (!isPolling.value) { stopPolling() // 确保定时器被清除 return } if (request.value && callback.value) { try { const response = await request.value(requestParams) callback.value(response) // 成功后重置重试计数 retryCount = 0 } catch (error) { console.error(error) const shouldContinue = await retry(error) // 如果 retry 返回 false，表示不应继续重试，此时需要停止轮询 if (!shouldContinue) { stopPolling('error') } } } }, interval.value) } /** * 开始轮询 * @param req 请求函数 * @param delay 轮询间隔(毫秒) * @param cb 响应处理回调 * @param params 请求参数 * @param options 配置选项 * @param options.immediate 是否立即执行第一次请求 * @param options.maxRetries 最大重试次数 * @param options.onError 错误处理回调 * @param options.onStop 停止轮询回调 */ const poll = ( req: RequestFunction, delay: number, cb: CallbackFunction, params?: P, options: { immediate?: boolean maxRetries?: number onError?: ErrorCallbackFunction onStop?: StopCallbackFunction } = {}, ): void => { const { immediate = false, onError, onStop, maxRetries: retries } = options request.value = req interval.value = delay callback.value = cb doImmediate.value = immediate requestParams = params if (retries !== undefined) { maxRetries.value = retries } if (onError) { errorCallback.value = onError } if (onStop) { stopCallback.value = onStop } start() } /** * 手动停止轮询 */ const stop = (): void => { stopPolling('manual') } // 组件卸载时自动清理 onScopeDispose(() => { stopPolling('component_unmounted') }) return { poll, stop, isPolling, // 暴露轮询状态，方便外部检查 } } export default usePoller ``` ## 基本用法下面是`usePoller`的基本用法示例： ```vue ``` ## 使用场景与示例 ### 场景一：实时数据仪表盘在监控仪表盘中，需要定期刷新数据以显示最新状态。 ```vue ``` ### 场景二：长时间运行的任务状态检查当启动一个长时间运行的后台任务时，可以使用轮询来检查任务的进度。 ```vue ``` ### 场景三：聊天应用中的消息轮询在不使用WebSocket的简单聊天应用中，可以使用轮询来获取新消息。 ```vue ``` ### 场景四：带有条件轮询的表单验证在某些表单中，可能需要在用户输入特定值后验证该值是否可用（如用户名检查）。 ```vue ``` ### 场景五：带有智能重试的文件上传状态检查在大文件上传场景中，客户端发起上传后，可以使用轮询来检查服务器端的处理状态。 ```vue ``` ## 高级使用技巧 ### 1. 动态调整轮询间隔在某些情况下，可能需要根据服务器负载或响应时间动态调整轮询间隔。 ```javascript // 初始轮询间隔为5秒 let pollInterval = 5000 // 根据响应时间动态调整轮询间隔 const adaptivePolling = async () => { const { poll, stop } = usePoller() const fetchWithTiming = async (params) => { const startTime = Date.now() const result = await fetchData(params) const responseTime = Date.now() - startTime // 根据响应时间调整下一次轮询间隔 if (responseTime > 1000) { // 服务器响应慢，增加间隔 pollInterval = Math.min(pollInterval * 1.5, 30000) // 最大30秒 } else if (responseTime < 200 && pollInterval > 2000) { // 服务器响应快，减少间隔 pollInterval = Math.max(pollInterval * 0.8, 2000) // 最小2秒 } return result } const handleResponse = (data) => { // 处理数据... // 停止当前轮询并以新的间隔重新开始 stop() poll(fetchWithTiming, pollInterval, handleResponse, params, { immediate: false }) } // 开始初始轮询 poll(fetchWithTiming, pollInterval, handleResponse, params, { immediate: true }) } ``` ### 2. 条件轮询只在特定条件满足时才进行轮询： ```javascript import { usePoller } from '@/composables/use-poller' import { ref, watch } from 'vue' const { poll, stop, isPolling } = usePoller() const shouldPoll = ref(false) const data = ref(null) // 监听条件变化 watch(shouldPoll, (newValue) => { if (newValue && !isPolling.value) { // 开始轮询 poll(fetchData, 5000, handleResponse, params, { immediate: true }) } else if (!newValue && isPolling.value) { // 停止轮询 stop() } }) // 根据用户交互或其他条件改变shouldPoll的值 const startDataUpdates = () => { shouldPoll.value = true } const stopDataUpdates = () => { shouldPoll.value = false } ``` ### 3. 多轮询协调在复杂应用中，可能需要同时管理多个轮询： ```javascript import { usePoller } from '@/composables/use-poller' import { reactive } from 'vue' // 创建多个轮询实例 const userDataPoller = usePoller() const notificationsPoller = usePoller() const systemStatusPoller = usePoller() // 统一管理所有轮询 const pollers = reactive({ userData: userDataPoller, notifications: notificationsPoller, systemStatus: systemStatusPoller }) // 启动所有轮询 const startAllPollers = () => { pollers.userData.poll(fetchUserData, 10000, handleUserData, null, { immediate: true }) pollers.notifications.poll(fetchNotifications, 5000, handleNotifications, null, { immediate: true }) pollers.systemStatus.poll(fetchSystemStatus, 30000, handleSystemStatus, null, { immediate: true }) } // 停止所有轮询 const stopAllPollers = () => { Object.values(pollers).forEach(poller => poller.stop()) } // 根据网络状态管理轮询 window.addEventListener('online', startAllPollers) window.addEventListener('offline', stopAllPollers) ``` ## 性能优化建议使用轮询时，需要注意以下性能优化点： 1. **合理设置轮询间隔**：间隔太短会增加服务器负载，间隔太长会影响实时性 2. **使用条件轮询**：只在需要时才启动轮询，不需要时及时停止 3. **实现指数退避**：在错误情况下，逐渐增加重试间隔 4. **设置最大重试次数**：避免无限重试导致资源浪费 5. **组件卸载时清理**：确保在组件销毁时停止轮询 ## 结论 `usePoller`组合式函数为Vue 3应用提供了一种强大而灵活的轮询解决方案。通过封装复杂的轮询逻辑，它使开发者能够轻松实现各种实时数据更新场景，同时内置的错误处理和重试机制确保了应用的稳定性和可靠性。虽然在许多情况下WebSocket可能是更好的实时通信选择，但轮询仍然是一种简单、兼容性好的替代方案，特别适用于不需要高频率更新的场景。通过本文介绍的`usePoller`和各种使用场景，你应该能够在自己的Vue 3应用中轻松实现高质量的轮询功能。

实时数据

{{ key }}

任务状态监控

任务结果:

任务失败:

聊天室

文件上传

处理结果: