当前位置：首页 > VUE

vue项目如何实现轮询

2026-02-21 06:46:17VUE

使用 `setInterval` 实现基础轮询

在 Vue 组件的 mounted 生命周期钩子中，通过 setInterval 定时调用接口或执行逻辑。注意在 beforeDestroy 钩子中清除定时器，避免内存泄漏。

export default {
  data() {
    return {
      pollInterval: null
    }
  },
  mounted() {
    this.pollInterval = setInterval(() => {
      this.fetchData()
    }, 5000) // 每5秒执行一次
  },
  beforeDestroy() {
    clearInterval(this.pollInterval)
  },
  methods: {
    fetchData() {
      // 调用API或执行其他轮询逻辑
    }
  }
}

结合 `axios` 实现异步轮询

在异步请求完成后，根据返回结果决定是否继续轮询。适用于需要条件控制的场景（如任务状态检查）。

export default {
  methods: {
    startPolling() {
      this.pollData()
    },
    pollData() {
      axios.get('/api/status').then(response => {
        if (response.data.progress < 100) {
          setTimeout(this.pollData, 2000) // 2秒后继续轮询
        }
      })
    }
  }
}

使用 `WebSocket` 替代轮询（推荐方案）

对于实时性要求高的场景，建议用 WebSocket 替代轮询。通过 vue-native-websocket 等库实现更高效的双向通信。

import VueNativeSock from 'vue-native-websocket'

Vue.use(VueNativeSock, 'wss://your-websocket-url', {
  reconnection: true,
  reconnectionDelay: 5000
})

// 组件内使用
this.$socket.send('your message')

通过自定义指令封装轮询逻辑

创建可复用的轮询指令，避免重复代码。

vue项目如何实现轮询

Vue.directive('poll', {
  bind(el, { value }) {
    const [callback, interval] = value
    el._pollInterval = setInterval(callback, interval)
  },
  unbind(el) {
    clearInterval(el._pollInterval)
  }
})

// 使用方式
<div v-poll="[fetchData, 3000]"></div>