当前位置：首页 > VUE

vue3中实现接口轮询

2026-03-06 21:04:28VUE

实现接口轮询的方法

在Vue3中，可以通过以下几种方式实现接口轮询：

vue3中实现接口轮询

使用setInterval

import { onMounted, onUnmounted } from 'vue'
import axios from 'axios'

export default {
  setup() {
    let pollInterval

    const fetchData = async () => {
      try {
        const response = await axios.get('your-api-endpoint')
        console.log(response.data)
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    }

    onMounted(() => {
      pollInterval = setInterval(fetchData, 5000) // 每5秒轮询一次
    })

    onUnmounted(() => {
      clearInterval(pollInterval)
    })

    return { fetchData }
  }
}

使用setTimeout递归调用

import { onMounted, onUnmounted, ref } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const isPolling = ref(true)

    const pollData = async () => {
      if (!isPolling.value) return

      try {
        const response = await axios.get('your-api-endpoint')
        console.log(response.data)
      } catch (error) {
        console.error('Error fetching data:', error)
      } finally {
        setTimeout(pollData, 5000)
      }
    }

    onMounted(() => {
      pollData()
    })

    onUnmounted(() => {
      isPolling.value = false
    })

    return { isPolling }
  }
}

使用Web Workers实现后台轮询

// worker.js
self.onmessage = function(e) {
  if (e.data === 'start') {
    setInterval(() => {
      fetch('your-api-endpoint')
        .then(response => response.json())
        .then(data => self.postMessage(data))
        .catch(error => self.postMessage({error}))
    }, 5000)
  }
}

// Vue组件中
import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    let worker

    onMounted(() => {
      worker = new Worker('worker.js')
      worker.postMessage('start')
      worker.onmessage = (e) => {
        console.log('Received data:', e.data)
      }
    })

    onUnmounted(() => {
      worker.terminate()
    })
  }
}

优化轮询策略

指数退避策略

当接口可能不稳定时，可以采用指数退避策略：

vue3中实现接口轮询

let retryCount = 0
const maxRetries = 5
const baseDelay = 1000

const fetchWithRetry = async () => {
  try {
    const response = await axios.get('your-api-endpoint')
    retryCount = 0
    return response.data
  } catch (error) {
    if (retryCount < maxRetries) {
      retryCount++
      const delay = Math.min(baseDelay * Math.pow(2, retryCount), 30000)
      await new Promise(resolve => setTimeout(resolve, delay))
      return fetchWithRetry()
    }
    throw error
  }
}

条件轮询

根据应用状态决定是否继续轮询：

const shouldPoll = ref(true)

watch(shouldPoll, (newVal) => {
  if (newVal) {
    startPolling()
  } else {
    stopPolling()
  }
})

使用第三方库

可以考虑使用专门处理轮询的库，如vue-use中的useIntervalFn：

import { useIntervalFn } from '@vueuse/core'

export default {
  setup() {
    const { pause, resume } = useIntervalFn(async () => {
      const response = await axios.get('your-api-endpoint')
      console.log(response.data)
    }, 5000)

    return { pause, resume }
  }
}