Vue中实现轮询请求的三种主流方案详解

npm install vue-request

import { defineComponent } from 'vue'
import useRequest from 'vue-request'
import axios from 'axios'
export default defineComponent({
  setup() {
    const fetchData = async () => {
      const res = await axios.get('/api/realtime-data')
      return res.data
    }
    const { data, loading } = useRequest(fetchData, {
      pollingWhenHidden: false, // 页面隐藏时不轮询
      pollingInterval: 5000,     // 每5秒请求一次
    })
    return () => (
      <div>
        {loading.value ? '加载中...' : JSON.stringify(data.value)}
      </div>
    )
  }
})

npm install @vueuse/core

import { defineComponent, ref } from 'vue'
import { useIntervalFn } from '@vueuse/core'
import axios from 'axios'
export default defineComponent({
  setup() {
    const data = ref(null)
    const loading = ref(false)
    const fetchData = async () => {
      loading.value = true
      try {
        const res = await axios.get('/api/realtime-data')
        data.value = res.data
      } catch (error) {
        console.error('请求失败:', error)
      } finally {
        loading.value = false
      }
    }
    const { pause, resume, isActive } = useIntervalFn(fetchData, 5000, {
      immediate: true,
      callback: fetchData
    })
    return () => (
      <div>
        <button onClick={isActive.value ? pause : resume}>
          {isActive.value ? '暂停轮询' : '开始轮询'}
        </button>
        {loading.value ? '加载中...' : JSON.stringify(data.value)}
      </div>
    )
  }
})

npm install rxjs

import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
import { interval, Subscription, from } from 'rxjs'
import { switchMap } from 'rxjs/operators'
import axios from 'axios'
export default defineComponent({
  setup() {
    const data = ref(null)
    const loading = ref(false)
    const error = ref(null)
    let subscription: Subscription
    onMounted(() => {
      subscription = interval(5000).pipe(
        switchMap(() => {
          loading.value = true
          return from(axios.get('/api/realtime-data'))
        })
      ).subscribe({
        next: (res) => {
          data.value = res.data
          loading.value = false
        },
        error: (err) => {
          error.value = err.message
          loading.value = false
        }
      })
    })
    onUnmounted(() => {
      if (subscription) subscription.unsubscribe()
    })
    return () => (
      <div>
        {loading.value && <p>加载中...</p>}
        {error.value && <p style="color: red;">{error.value}</p>}
        {data.value && <pre>{JSON.stringify(data.value, null, 2)}</pre>}
      </div>
    )
  }
})