快捷導(dǎo)航

Vue中實(shí)現(xiàn)輪詢請求的三種主流方案詳解

更新時間：2025年07月16日 09:02:52 作者：溫華從此不練劍

這篇文章主要為大家詳細(xì)介紹了使用Vue實(shí)現(xiàn)輪詢請求的三種主流方案,包括vue-request、@vueuse/core 與 RxJS,感興趣的小伙伴可以了解下

1. 使用 vue-request 實(shí)現(xiàn)輪詢請求

vue-request 是一個類 React 的 ahooks 風(fēng)格的 Vue 數(shù)據(jù)請求 Hook 庫，非常適合 Vue 3 + Composition API 項目。

安裝：

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>
    )
  }
})

優(yōu)勢：

內(nèi)置輪詢、緩存、錯誤重試等功能
支持自動取消請求
可與 Vue 組件生命周期良好配合

2. 使用 @vueuse/core 實(shí)現(xiàn)輪詢

@vueuse/core 提供了大量 Vue 3 的組合式函數(shù)，其中 useIntervalFn 是實(shí)現(xiàn)輪詢的理想選擇。

安裝：

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>
    )
  }
})

優(yōu)勢：

精細(xì)控制輪詢啟動/暫停
支持組件卸載時自動清理定時器
可與其他組合函數(shù)結(jié)合使用（如 useFetch）

3. 使用 rxjs 實(shí)現(xiàn)輪詢

RxJS 是一個強(qiáng)大的響應(yīng)式編程庫，適合需要構(gòu)建復(fù)雜異步數(shù)據(jù)流的場景。

安裝：

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>
    )
  }
})

優(yōu)勢：

構(gòu)建復(fù)雜的數(shù)據(jù)流（如合并多個請求、節(jié)流、過濾）
錯誤處理更強(qiáng)大
支持取消訂閱，避免內(nèi)存泄漏

輪詢請求方案

方案	特點(diǎn)	適用場景
vue-request	簡潔易用，基于函數(shù)式調(diào)用，內(nèi)置輪詢、防抖、節(jié)流等特性	快速實(shí)現(xiàn)輪詢功能
@vueuse/core	基于 Composition API，與 Vue 3 深度集成，提供 useIntervalFn 等工具函數(shù)	更加靈活控制輪詢邏輯
rxjs	強(qiáng)大的響應(yīng)式編程庫，支持復(fù)雜的數(shù)據(jù)流處理	需要精細(xì)控制數(shù)據(jù)流和錯誤處理

輪詢的應(yīng)用場景分析

場景	描述	推薦方案
實(shí)時訂單狀態(tài)更新	用戶查看訂單狀態(tài)是否已支付或完成	@vueuse/core 或 vue-request
后臺任務(wù)進(jìn)度監(jiān)控	如文件上傳、視頻轉(zhuǎn)碼等長時間任務(wù)	rxjs（便于鏈?zhǔn)教幚恚?/td>
聊天應(yīng)用中的新消息檢測	當(dāng)前頁面未使用 WebSocket 時	vue-request（簡潔高效）
數(shù)據(jù)大屏展示	多個圖表定期刷新數(shù)據(jù)	@vueuse/core（可統(tǒng)一控制）