vue 轮询实现

Vue 轮询实现方法

使用 setInterval 实现基础轮询

在 Vue 组件的 mounted 钩子中设置定时器，通过 setInterval 定期执行请求逻辑。注意在 beforeDestroy 钩子中清除定时器以避免内存泄漏。

export default {
  data() {
    return {
      pollInterval: null,
      data: null
    }
  },
  mounted() {
    this.pollInterval = setInterval(() => {
      this.fetchData()
    }, 5000) // 每5秒轮询一次
  },
  beforeDestroy() {
    clearInterval(this.pollInterval)
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('/api/data')
        this.data = response.data
      } catch (error) {
        console.error('轮询请求失败:', error)
      }
    }
  }
}

使用递归 setTimeout 实现可控轮询

递归调用 setTimeout 可以在每次请求完成后才设置下一次轮询，避免请求堆积问题。

export default {
  data() {
    return {
      pollingActive: true,
      data: null
    }
  },
  mounted() {
    this.startPolling()
  },
  beforeDestroy() {
    this.pollingActive = false
  },
  methods: {
    async startPolling() {
      if (!this.pollingActive) return

      try {
        const response = await axios.get('/api/data')
        this.data = response.data
      } catch (error) {
        console.error('轮询请求失败:', error)
      }

      setTimeout(this.startPolling, 5000)
    }
  }
}

使用 Web Worker 实现后台轮询

对于计算密集型或需要长时间运行的轮询任务，可以使用 Web Worker 避免阻塞主线程。

// worker.js
self.onmessage = function(e) {
  if (e.data === 'start') {
    setInterval(() => {
      self.postMessage('fetch')
    }, 5000)
  }
}

// Vue组件
export default {
  data() {
    return {
      worker: null,
      data: null
    }
  },
  mounted() {
    this.worker = new Worker('./worker.js')
    this.worker.onmessage = (e) => {
      if (e.data === 'fetch') {
        this.fetchData()
      }
    }
    this.worker.postMessage('start')
  },
  beforeDestroy() {
    this.worker.terminate()
  },
  methods: {
    async fetchData() {
      // 请求逻辑
    }
  }
}

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

对于更复杂的轮询需求，可以考虑使用如 vue-poll 等专门为 Vue 设计的轮询库。

安装：

npm install vue-poll

使用示例：

import VuePoll from 'vue-poll'
export default {
  components: { VuePoll },
  template: `
    <vue-poll 
      :request="fetchData"
      :interval="5000"
      @response="handleResponse"
    />
  `,
  methods: {
    fetchData() {
      return axios.get('/api/data')
    },
    handleResponse(response) {
      this.data = response.data
    }
  }
}

轮询优化技巧

添加错误处理和重试机制，在请求失败时进行指数退避重试。

methods: {
  async fetchData(retryCount = 0) {
    try {
      const response = await axios.get('/api/data')
      this.data = response.data
    } catch (error) {
      const delay = Math.min(1000 * 2  retryCount, 30000)
      setTimeout(() => {
        this.fetchData(retryCount + 1)
      }, delay)
    }
  }
}

根据应用状态动态调整轮询频率，例如当页面不可见时暂停轮询。

mounted() {
  document.addEventListener('visibilitychange', this.handleVisibilityChange)
  this.startPolling()
},
methods: {
  handleVisibilityChange() {
    if (document.hidden) {
      clearInterval(this.pollInterval)
    } else {
      this.startPolling()
    }
  }
}