如何优雅地实现每 5 秒轮询请求？

在做实时监控系统时，比如服务器状态面板、订单处理中心或物联网设备看板，每隔 5 秒自动拉取最新数据是再常见不过的需求了。

但你有没有遇到过这些问题？

• 
  
• 页面切到后台还在疯狂发请求，浪费资源
  
• 上一次请求还没回来，下一次又发了，接口雪崩
  
• 用户切换标签页回来，发现数据“卡”在旧状态
  
• 页面销毁了定时器还在跑，内存泄漏
  

今天我就以一个运维监控平台的真实场景为例，带你从“能用”做到“好用”。

一、问题场景：设备在线状态轮询

假设我们要做一个 IDC 机房设备监控页，需求如下：

• 
  
• 每 5 秒查询一次所有服务器的在线状态
  
• 接口 /api/servers/status 响应较慢（平均 1.2s）
  
• 用户可能切换到其他标签页处理邮件
  
• 页面关闭时必须停止轮询
  

如果直接写个 setInterval，很容易踩坑。我们一步步来优化。

二、第一版：基础轮询（能跑，但有隐患）

import { ref, onMounted, onUnmounted } from 'vue'

const servers = ref([])
let timer = null

onMounted(() => {
const poll = () => {
fetch('/api/servers/status')

      .then(res => res.json())

      .then(data => {

        servers.value = data

      })

  }

poll() // 首次立即执行

  timer = setInterval(poll, 5000) // 每5秒轮询

})

onUnmounted(() => {
clearInterval(timer) // 🔍 清理定时器

})

✅ 实现了基本功能

❌ 但存在三个致命问题：

三、第二版：可控轮询 + 可见性优化

我们改用“请求完成后再延迟 5 秒”的策略，避免并发：

import { ref, onMounted, onUnmounted } from 'vue'

const servers = ref([])
let abortController = null // 用于取消请求

const poll = async () => {
try {
// 支持取消上一次请求

    abortController?.abort()

    abortController = new AbortController()

const res = await fetch('/api/servers/status', {
signal: abortController.signal

    })

if (!res.ok) throw new Error('Network error')

const data = await res.json()

    servers.value = data

  } catch (err) {
if (err.name !== 'AbortError') {
console.warn('轮询失败，将重试...', err)

    }

  } finally {
// 🔍 请求结束后再等5秒发起下一次
setTimeout(poll, 5000)

  }

}

onMounted(() => {
poll() // 启动轮询

})

onUnmounted(() => {

  abortController?.abort()

})

🔍 关键点解析：

• 
  
• finally 中 setTimeout 实现“串行轮询”，避免并发
  
• AbortController 可在组件卸载时主动取消进行中的请求
  
• 错误被捕获后仍继续轮询，保证稳定性
  

四、第三版：智能节流 —— 页面可见性控制

现在解决“页面不可见时是否轮询”的问题。我们引入 visibilitychange 事件：

let isVisible = true

const handleVisibilityChange = () => {

  isVisible = !document.hidden
console.log('页面可见性:', isVisible ? '可见' : '隐藏')

}

onMounted(() => {
// 监听页面可见性
document.addEventListener('visibilitychange', handleVisibilityChange)

const poll = async () => {
try {

      abortController?.abort()

      abortController = new AbortController()

const res = await fetch('/api/servers/status', {
signal: abortController.signal

      })

const data = await res.json()

      servers.value = data

    } catch (err) {
if (err.name !== 'AbortError') {
console.warn('轮询失败:', err)

      }

    } finally {
// 🔍 只有页面可见时才继续轮询
if (isVisible) {
setTimeout(poll, 5000)

      } else {
// 页面隐藏，等待恢复后再请求
document.addEventListener('visibilitychange', function waitVisible() {
if (!document.hidden) {
document.removeEventListener('visibilitychange', waitVisible)
setTimeout(poll, 1000) // 恢复后1秒再查

          }

        }, { once: true })

      }

    }

  }

poll()

})

🔍 这里做了两层控制：

五、封装成可复用的轮询 Hook

把这套逻辑抽象成通用 usePolling Hook：

// composables/usePolling.js
import { ref } from 'vue'

export function usePolling(fetchFn, interval = 5000) {
const data = ref(null)
const loading = ref(false)
const error = ref(null)
let abortController = null
let isVisible = true

const poll = async () => {
if (loading.value) return // 防止重复执行


    loading.value = true

    error.value = null

try {

      abortController?.abort()

      abortController = new AbortController()

const result = await fetchFn(abortController.signal)

      data.value = result

    } catch (err) {
if (err.name !== 'AbortError') {

        error.value = err
console.warn('Polling error:', err)

      }

    } finally {

      loading.value = false
// 🔍 根据可见性决定是否继续
if (isVisible) {
setTimeout(poll, interval)

      }

    }

  }

const start = () => {
// 移除旧监听避免重复
document.removeEventListener('visibilitychange', handleVisibility)
document.addEventListener('visibilitychange', handleVisibility)
poll()

  }

const stop = () => {

    abortController?.abort()
document.removeEventListener('visibilitychange', handleVisibility)

  }

const handleVisibility = () => {

    isVisible = !document.hidden
if (isVisible) {
setTimeout(poll, 1000)

    }

  }

return { data, loading, error, start, stop }

}

使用方式极其简洁：

<script setup>

import { usePolling } from '@/composables/usePolling'


const fetchStatus = async (signal) => {

  const res = await fetch('/api/servers/status', { signal })

  return res.json()

}


const { data, loading } = usePolling(fetchStatus, 5000)


// 自动在 onMounted 启动

</script>


<template>

  <div v-if="loading">加载中...</div>

  <ul v-else>

    <li v-for="server in data" :key="server.id">

      {{ server.name }} - {{ server.status }}

    </li>

  </ul>

</template>

六、对比主流轮询方案

七、举一反三：三个变体场景实现思路

小结

实现“每 5 秒轮询”看似简单，但要做到稳定、节能、用户体验好，需要考虑：

• 
  
• ✅ 使用 串行 setTimeout 替代 setInterval，避免请求堆积
  
• ✅ 利用 AbortController 主动取消无用请求
  
• ✅ 结合 页面可见性 API 节省资源
  
• ✅ 封装为 可复用 Hook，提升工程化水平
  

记住一句话：好的轮询，是“聪明地少做事”，而不是“拼命做事情”。

下次当你接到“每隔 X 秒刷新”的需求时，别急着写 setInterval，先问问自己：用户真的需要这么频繁吗？能不能用 WebSocket？页面看不见的时候还要刷吗？