当前位置：首页 > VUE

vue 轮询实现

2026-03-07 14:31:32VUE

Vue 轮询实现方法

在Vue中实现轮询通常用于定期从服务器获取数据更新，以下是几种常见实现方式：

使用 setInterval

创建定时器组件内定期执行请求：

data() {
  return {
    pollInterval: null,
    data: null
  }
},
methods: {
  fetchData() {
    axios.get('/api/data').then(response => {
      this.data = response.data
    })
  }
},
mounted() {
  this.pollInterval = setInterval(() => {
    this.fetchData()
  }, 5000) // 每5秒请求一次
},
beforeDestroy() {
  clearInterval(this.pollInterval) // 组件销毁时清除定时器
}

使用 setTimeout 递归

更可控的递归实现方式：

methods: {
  pollData() {
    axios.get('/api/data').then(response => {
      this.data = response.data
      setTimeout(this.pollData, 5000) // 完成后设置下次轮询
    })
  }
},
mounted() {
  this.pollData() // 启动首次轮询
}

使用 Web Worker

后台线程轮询避免阻塞UI：

// worker.js
self.addEventListener('message', function(e) {
  setInterval(() => {
    fetch(e.data.url).then(res => res.json()).then(data => {
      self.postMessage(data)
    })
  }, e.data.interval)
})

// Vue组件
created() {
  this.worker = new Worker('worker.js')
  this.worker.postMessage({
    url: '/api/data',
    interval: 5000
  })
  this.worker.onmessage = (e) => {
    this.data = e.data
  }
},
beforeDestroy() {
  this.worker.terminate()
}

使用第三方库

如 axios-retry 实现带重试的轮询：

import axiosRetry from 'axios-retry'

axiosRetry(axios, {
  retries: 3,
  retryDelay: (retryCount) => {
    return retryCount * 1000
  }
})

// 正常请求会自动重试

轮询优化建议

添加错误处理防止轮询中断
根据网络状况动态调整轮询间隔
页面隐藏时暂停轮询（通过 Visibility API）
重要数据可使用WebSocket替代轮询

动态轮询间隔示例

根据响应结果调整下次轮询时间：

vue 轮询实现

methods: {
  pollData(delay = 5000) {
    axios.get('/api/data').then(response => {
      this.data = response.data
      const nextDelay = response.data.changed ? 1000 : 5000
      setTimeout(this.pollData, nextDelay)
    }).catch(() => {
      setTimeout(this.pollData, 10000) // 出错延长间隔
    })
  }
}

以上方法可根据具体需求选择或组合使用，关键是要处理好组件销毁时的资源清理。

标签: vue