当前位置：首页 > VUE

vue实现轮询

2026-03-06 22:20:48VUE

Vue 实现轮询的方法

轮询是一种常见的客户端与服务器交互方式，通过定时发送请求获取最新数据。以下是几种在 Vue 中实现轮询的典型方法：

使用 `setInterval` 实现基础轮询

通过 JavaScript 原生定时器 setInterval 实现轮询逻辑：

export default {
  data() {
    return {
      pollInterval: null,
      pollData: null
    }
  },
  mounted() {
    this.startPolling()
  },
  beforeDestroy() {
    this.stopPolling()
  },
  methods: {
    fetchData() {
      axios.get('/api/data').then(response => {
        this.pollData = response.data
      })
    },
    startPolling() {
      this.pollInterval = setInterval(() => {
        this.fetchData()
      }, 5000) // 每5秒轮询一次
    },
    stopPolling() {
      if (this.pollInterval) {
        clearInterval(this.pollInterval)
        this.pollInterval = null
      }
    }
  }
}

使用 `setTimeout` 实现链式轮询

通过递归调用 setTimeout 实现更可控的轮询：

export default {
  data() {
    return {
      pollTimer: null,
      pollData: null
    }
  },
  mounted() {
    this.startPolling()
  },
  beforeDestroy() {
    this.stopPolling()
  },
  methods: {
    fetchData() {
      axios.get('/api/data').then(response => {
        this.pollData = response.data
        this.pollTimer = setTimeout(this.fetchData, 5000)
      }).catch(() => {
        this.pollTimer = setTimeout(this.fetchData, 5000)
      })
    },
    startPolling() {
      this.fetchData()
    },
    stopPolling() {
      if (this.pollTimer) {
        clearTimeout(this.pollTimer)
        this.pollTimer = null
      }
    }
  }
}

使用 Web Workers 实现后台轮询

对于计算密集型或需要后台持续运行的轮询任务：

// worker.js
self.onmessage = function(e) {
  setInterval(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => self.postMessage(data))
  }, e.data.interval || 5000)
}

// Vue 组件
export default {
  data() {
    return {
      worker: null,
      pollData: null
    }
  },
  mounted() {
    this.worker = new Worker('worker.js')
    this.worker.postMessage({ interval: 3000 })
    this.worker.onmessage = (e) => {
      this.pollData = e.data
    }
  },
  beforeDestroy() {
    this.worker.terminate()
  }
}

使用第三方库实现高级轮询

利用如 axios-retry 等库增强轮询功能：

import axios from 'axios'
import axiosRetry from 'axios-retry'

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

export default {
  methods: {
    startPolling() {
      setInterval(() => {
        axios.get('/api/data')
          .then(response => {
            // 处理数据
          })
          .catch(error => {
            // 错误处理
          })
      }, 5000)
    }
  }
}