当前位置：首页 > VUE

vue 轮询实现

2026-03-28 00:30:59VUE

Vue 轮询实现方法

轮询是一种通过定时重复请求实现数据更新的技术，适用于实时性要求不高的场景。以下是几种 Vue 中实现轮询的常见方式：

使用 setInterval

通过 setInterval 创建定时器，在组件生命周期中管理定时器的启动和销毁：

export default {
  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 递归

递归调用 setTimeout 可以避免 setInterval 的固定间隔问题，确保前一次请求完成后再发起下一次：

vue 轮询实现

export default {
  data() {
    return {
      data: null
    }
  },
  methods: {
    fetchData() {
      axios.get('/api/data').then(response => {
        this.data = response.data
        setTimeout(this.fetchData, 5000) // 请求完成后5秒再次调用
      })
    }
  },
  mounted() {
    this.fetchData()
  }
}

使用 Web Workers

对于需要长时间运行的轮询任务，可以使用 Web Workers 避免阻塞主线程：

// worker.js
self.addEventListener('message', () => {
  setInterval(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => self.postMessage(data))
  }, 5000)
})

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

使用第三方库

可以借助如 axios-retry 等库实现更健壮的轮询机制：

vue 轮询实现

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

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

export default {
  methods: {
    pollWithRetry() {
      axios.get('/api/data')
        .then(response => {
          // 处理数据
          setTimeout(this.pollWithRetry, 5000)
        })
        .catch(error => {
          console.error('轮询失败:', error)
        })
    }
  },
  mounted() {
    this.pollWithRetry()
  }
}