vue3的智能轮训hooks，useSmartPoller

一、为什么我们需要更智能的轮询？

在前端开发中，轮询是获取实时数据的常用方式。传统轮询存在三大痛点：

资源浪费：固定间隔请求不考虑网络状况和服务器负载
错误处理不完善：简单重试可能导致"雪崩效应"
代码复杂度高：每个组件都需要管理自己的定时器和状态

本文将介绍一种基于Vue 3组合式API的智能轮询解决方案，彻底解决这些问题。

二、智能轮询的核心设计

1. 核心设计原则

自适应间隔：根据网络状况动态调整请求频率
优雅降级：出错时使用指数退避策略
资源自动释放：组件卸载时自动清理
状态可观测：轮询状态响应式管理

2. 完整实现代码

javascript 复制代码

import { ref, onUnmounted } from 'vue'

export function useSmartPoller() {
  const isPolling = ref(false)
  const timer = ref(null)
  const retryCount = ref(0)
  const maxRetries = ref(3)
  
  // 计算退避时间（核心算法）
  const calculateBackoff = () => {
    const baseDelay = 1000 // 基础延迟1秒
    const maxDelay = 30000 // 最大延迟30秒
    const jitter = Math.random() * 1000 // 随机抖动，防止同步请求
    
    // 指数退避公式：基础延迟 * 2^重试次数 + 随机抖动
    return Math.min(
      baseDelay * Math.pow(2, retryCount.value) + jitter, 
      maxDelay
    )
  }
  
  // 停止轮询
  const stop = (reason = 'manual') => {
    if (timer.value) {
      clearTimeout(timer.value)
      timer.value = null
    }
    isPolling.value = false
    retryCount.value = 0
    
    return { reason }
  }
  
  // 开始轮询
  const start = (options) => {
    const {
      requestFn, // 请求函数
      interval = 5000, // 默认间隔
      onSuccess, // 成功回调
      onError, // 错误回调
      onStop, // 停止回调
      immediate = true, // 是否立即执行
      retries = 3, // 最大重试次数
      params // 请求参数
    } = options
    
    // 停止之前的轮询
    stop()
    
    // 更新配置
    maxRetries.value = retries
    isPolling.value = true
    
    // 轮询执行函数
    const execute = async () => {
      if (!isPolling.value) return
      
      try {
        // 执行请求
        const result = await requestFn(params)
        
        // 成功后重置重试计数
        retryCount.value = 0
        
        // 调用成功回调
        if (onSuccess) onSuccess(result)
        
        // 设置下一次轮询
        if (isPolling.value) {
          timer.value = setTimeout(execute, interval)
        }
      } catch (error) {
        // 错误处理
        const shouldRetry = onError ? await onError(error) : true
        
        if (shouldRetry && retryCount.value < maxRetries.value) {
          // 增加重试计数
          retryCount.value++
          
          // 使用指数退避策略设置下一次重试
          const backoffTime = calculateBackoff()
          console.log(`轮询失败，${backoffTime/1000}秒后重试(${retryCount.value}/${maxRetries.value})`)
          
          timer.value = setTimeout(execute, backoffTime)
        } else {
          // 达到最大重试次数或用户决定不再重试
          const stopResult = stop('error')
          if (onStop) onStop(stopResult.reason, error)
        }
      }
    }
    
    // 是否立即执行
    if (immediate) {
      execute()
    } else {
      timer.value = setTimeout(execute, interval)
    }
    
    return { stop }
  }
  
  // 组件卸载时自动清理
  onUnmounted(() => stop('unmounted'))
  
  return {
    start,
    stop,
    isPolling
  }
}

三、核心功能解析

1. 指数退避算法

javascript 复制代码

// 退避时间计算
baseDelay * Math.pow(2, retryCount) + Math.random() * 1000

这个算法确保：

首次失败后等待1秒
第二次失败后等待2秒
第三次失败后等待4秒
依此类推...

添加随机抖动（jitter）防止多客户端同时重试导致的"惊群效应"。

2. 响应式状态管理

javascript 复制代码

const isPolling = ref(false)
const retryCount = ref(0)

使用Vue 3的ref创建响应式状态，方便在组件中监控轮询状态。

3. 自动资源清理

javascript 复制代码

onUnmounted(() => stop('unmounted'))

组件卸载时自动停止轮询，防止内存泄漏和无效请求。

四、实战应用场景

场景一：实时数据仪表盘

javascript 复制代码

<script setup>
import { ref } from 'vue'
import { useSmartPoller } from './useSmartPoller'

const dashboardData = ref({})
const { start, stop, isPolling } = useSmartPoller()

// 开始轮询获取仪表盘数据
start({
  requestFn: () => fetch('/api/dashboard').then(r => r.json()),
  interval: 10000, // 10秒更新一次
  onSuccess: (data) => {
    dashboardData.value = data
  },
  onError: (error) => {
    console.error('获取仪表盘数据失败', error)
    return true // 继续重试
  }
})
</script>

<template>
  <div class="dashboard">
    <div class="status">
      状态: {{ isPolling ? '实时更新中' : '已停止' }}
    </div>
    <button @click="isPolling ? stop() : start()">
      {{ isPolling ? '停止更新' : '开始更新' }}
    </button>
    
    <!-- 仪表盘内容 -->
    <div v-if="dashboardData.metrics">
      <div v-for="metric in dashboardData.metrics" :key="metric.id">
        {{ metric.name }}: {{ metric.value }}
      </div>
    </div>
  </div>
</template>

场景二：文件上传状态检查

javascript 复制代码

<script setup>
import { ref } from 'vue'
import { useSmartPoller } from './useSmartPoller'

const uploadStatus = ref('准备中')
const progress = ref(0)
const { start, stop } = useSmartPoller()

const uploadFile = async (file) => {
  // 上传文件
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData
  })
  
  const { uploadId } = await response.json()
  
  // 开始轮询检查上传状态
  start({
    requestFn: () => fetch(`/api/upload/${uploadId}/status`).then(r => r.json()),
    interval: 2000, // 2秒检查一次
    onSuccess: (data) => {
      progress.value = data.progress
      uploadStatus.value = data.status
      
      // 上传完成后停止轮询
      if (data.status === 'completed' || data.status === 'failed') {
        stop()
      }
    },
    retries: 5, // 最多重试5次
    immediate: true // 立即开始检查
  })
}
</script>

五、高级使用技巧

1. 动态调整轮询间隔

根据数据变化频率动态调整轮询间隔，提高效率：

javascript 复制代码

let previousData = null
let interval = 5000 // 初始5秒

const dynamicInterval = (newData) => {
  // 如果数据变化频繁，缩短间隔
  if (JSON.stringify(previousData) !== JSON.stringify(newData)) {
    interval = Math.max(interval * 0.8, 1000) // 最小1秒
  } else {
    // 数据稳定，延长间隔
    interval = Math.min(interval * 1.2, 30000) // 最大30秒
  }
  previousData = newData
  return interval
}

// 在成功回调中使用
onSuccess: (data) => {
  const newInterval = dynamicInterval(data)
  // 重新启动轮询，使用新间隔
  restart({ interval: newInterval })
}

2. 多轮询协调

在复杂应用中管理多个轮询任务：

javascript 复制代码

const pollers = ref([])

// 创建新轮询
const createPoller = (id, options) => {
  const poller = useSmartPoller()
  pollers.value.push({ id, poller })
  poller.start(options)
  return poller
}

// 停止特定轮询
const stopPoller = (id) => {
  const index = pollers.value.findIndex(p => p.id === id)
  if (index >= 0) {
    pollers.value[index].poller.stop()
    pollers.value.splice(index, 1)
  }
}

// 停止所有轮询
const stopAllPollers = () => {
  pollers.value.forEach(p => p.poller.stop())
  pollers.value = []
}

六、性能优化建议

避免过度轮询：根据业务需求设置合理的轮询间隔
使用条件轮询：只在用户活跃或需要实时数据时轮询
合并请求：多个组件需要相同数据时共享一个轮询实例
使用WebSocket替代：对于真正需要实时性的场景，考虑使用WebSocket

七、总结

智能轮询解决方案通过指数退避、动态间隔和自动资源管理，解决了传统轮询的痛点。在Vue 3的组合式API加持下，我们可以更优雅地实现复杂的轮询逻辑。

未来，我们可以进一步优化：

结合Service Worker实现离线轮询
与浏览器API（如Page Visibility API）集成，提高性能
添加更多智能策略，如基于机器学习的预测性轮询