Vue 中實現輪詢請求的三種主流方案：vue-request、@vueuse/core 與 RxJS 實戰解析
在現代前端開發中，輪詢（Polling）是一種常見的異步數據獲取方式，尤其適用于需要實時更新數據的場景，如：
- 實時監控儀表盤
- 聊天消息同步
- 訂單狀態更新
- 后臺任務執行進度
本文將圍繞 Vue 框架，介紹如何使用 vue-request、@vueuse/core 和 rxjs 三種主流方案實現輪詢請求，并結合實際應用場景進行講解。
一、什么是輪詢？
輪詢是指客戶端以固定時間間隔向服務器發送請求，主動獲取最新數據。雖然不是最高效的通信方式（相比 WebSocket），但在某些簡單場景下依然非常實用，尤其是在服務端不支持長連接的情況下。
二、技術選型對比
方案 | 特點 | 適用場景 |
vue-request | 簡潔易用，基于函數式調用，內置輪詢、防抖、節流等特性 | 快速實現輪詢功能 |
@vueuse/core | 基于 Composition API，與 Vue 3 深度集成，提供 useIntervalFn 等工具函數 | 更加靈活控制輪詢邏輯 |
rxjs | 強大的響應式編程庫，支持復雜的數據流處理 | 需要精細控制數據流和錯誤處理 |
三、方案詳解與示例
1. 使用 vue-request 實現輪詢請求
vue-request 是一個類 React 的 ahooks 風格的 Vue 數據請求 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>
)
}
})優勢：
- 內置輪詢、緩存、錯誤重試等功能
- 支持自動取消請求
- 可與 Vue 組件生命周期良好配合
2. 使用 @vueuse/core 實現輪詢
@vueuse/core 提供了大量 Vue 3 的組合式函數，其中 useIntervalFn 是實現輪詢的理想選擇。
安裝：
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>
)
}
})優勢：
- 精細控制輪詢啟動/暫停
- 支持組件卸載時自動清理定時器
- 可與其他組合函數結合使用（如 useFetch）
3. 使用 rxjs 實現輪詢
RxJS 是一個強大的響應式編程庫，適合需要構建復雜異步數據流的場景。
安裝：
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>
)
}
})優勢：
- 構建復雜的數據流（如合并多個請求、節流、過濾）
- 錯誤處理更強大
- 支持取消訂閱，避免內存泄漏
四、輪詢的應用場景分析
場景 | 描述 | 推薦方案 |
實時訂單狀態更新 | 用戶查看訂單狀態是否已支付或完成 | @vueuse/core 或 vue-request |
后臺任務進度監控 | 如文件上傳、視頻轉碼等長時間任務 | rxjs（便于鏈式處理） |
聊天應用中的新消息檢測 | 當前頁面未使用 WebSocket 時 | vue-request（簡潔高效） |
數據大屏展示 | 多個圖表定期刷新數據 | @vueuse/core（可統一控制） |
五、輪詢的注意事項
- 性能優化：控制輪詢頻率，避免頻繁請求影響性能。頁面不可見時暫停輪詢（如使用 visibilitychange 事件）
- 防止內存泄漏：在組件銷毀時清除定時器或取消訂閱
- 錯誤處理機制：請求失敗時進行重試或提示用戶
- 服務器壓力：盡量減少并發請求數量，合理設置間隔時間
總結：根據你的項目需求和技術棧，可以選擇最適合的輪詢方案。對于大多數中小型項目，推薦使用 vue-request 或 @vueuse/core；如果你有復雜的異步流程需求，rxjs 是更好的選擇。
