2025了，Vue3 中做輪詢的幾種最新方式
作者：林三心不學(xué)挖掘機
在 Vue3 中實現(xiàn)輪詢請求，以下是幾個值得推薦的解決方案和庫（包含原生方案和第三方庫）。
在 Vue3 中實現(xiàn)輪詢請求，以下是幾個值得推薦的解決方案和庫（包含原生方案和第三方庫），我根據(jù)實際開發(fā)經(jīng)驗為你整理推薦清單：
方案 | 特點 | 適用場景 | 包大小 | 文檔評級 |
vue-request | 功能全面的請求庫，內(nèi)置輪詢 | 需要完整請求管理 | 5.2kb | ???? |
axios + 自封裝 | 靈活可控，需自行處理 | 簡單輪詢需求 | 0kb | ?? |
rxjs | 響應(yīng)式編程庫 | 復(fù)雜輪詢邏輯 | 32kb | ??? |
@vueuse/core | 組合式API工具庫 | 組合式API項目 | 12kb | ???? |
具體實現(xiàn)方案
(1) 推薦首選：vue-request（專為Vue3設(shè)計）
npm install vue-request<script setup>
import { useRequest } from 'vue-request';
// 輪詢獲取數(shù)據(jù)示例
const { data, loading } = useRequest(
() => axios.get('/api/data'),
{
// 每3秒輪詢一次
pollingInterval: 3000,
// 錯誤重試策略
pollingWhenHidden: false, // 頁面隱藏時暫停
pollingErrorRetryCount: 3
}
);
</script>
<template>
<div v-if="loading">加載中...</div>
<div v-else>{{ data }}</div>
</template>(2) 原生方案：使用 Composition API 封裝
// utils/usePolling.ts
import { ref, onUnmounted } from'vue';
exportfunction usePolling<T>(fn: () => Promise<T>, interval: number) {
const data = ref<T>();
const error = ref<Error>();
const isPolling = ref(true);
let timer: number;
const execute = async () => {
try {
data.value = await fn();
} catch (err) {
error.value = err asError;
} finally {
if (isPolling.value) {
timer = setTimeout(execute, interval);
}
}
};
const stop = () => {
isPolling.value = false;
clearTimeout(timer);
};
// 自動開始
execute();
// 組件卸載時自動清理
onUnmounted(stop);
return { data, error, stop };
}<script setup>
import { usePolling } from './utils/usePolling';
const { data, stop } = usePolling(
() => fetch('/api/data').then(r => r.json()),
5000
);
</script>(3) 輕量級方案：@vueuse/core（推薦組合式API項目）
npm install @vueuse/core<script setup>
import { useIntervalFn } from '@vueuse/core';
const data = ref();
const error = ref();
// 每5秒執(zhí)行一次
const { pause, resume } = useIntervalFn(async () => {
try {
data.value = await axios.get('/api/data');
} catch (err) {
error.value = err;
pause(); // 出錯時暫停
}
}, 5000, { immediate: true });
</script>(4) RxJS 方案（適合復(fù)雜場景）
npm install rxjs<script setup>
import { interval, switchMap } from 'rxjs';
import { useObservable } from '@vueuse/rxjs';
const poll$ = interval(3000).pipe(
switchMap(() => from(axios.get('/api/data')))
);
const data = useObservable(poll$);
</script>選型建議
簡單場景：
- 使用 @vueuse/core 的 useIntervalFn
- 優(yōu)點：無需額外依賴，組合式API友好
- 注意：需自行處理錯誤和清理
完整請求管理：
- 選擇 vue-request
- 優(yōu)點：內(nèi)置錯誤重試、緩存、節(jié)流等高級功能
復(fù)雜輪詢邏輯：
- 采用 RxJS
- 優(yōu)點：處理競態(tài)條件、重試策略等復(fù)雜場景得心應(yīng)手
需要精細控制：
- 自行封裝（推薦 usePolling 方案）
- 優(yōu)點：完全可控，適合特殊業(yè)務(wù)需求
責(zé)任編輯：趙寧寧
來源：
前端之神
