2025了，Vue3 中做輪詢的幾種最新方式

作者：林三心不學挖掘機 2025-05-06 08:30:00

在 Vue3 中實現(xiàn)輪詢請求，以下是幾個值得推薦的解決方案和庫（包含原生方案和第三方庫）。

在 Vue3 中實現(xiàn)輪詢請求，以下是幾個值得推薦的解決方案和庫（包含原生方案和第三方庫），我根據(jù)實際開發(fā)經(jīng)驗為你整理推薦清單：

方案	特點	適用場景	包大小	文檔評級
vue-request	功能全面的請求庫，內(nèi)置輪詢	需要完整請求管理	5.2kb	????
axios + 自封裝	靈活可控，需自行處理	簡單輪詢需求	0kb	??
rxjs	響應式編程庫	復雜輪詢邏輯	32kb	???
@vueuse/core	組合式API工具庫	組合式API項目	12kb	????

具體實現(xiàn)方案

(1) 推薦首選：vue-request（專為Vue3設計）

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 方案（適合復雜場景）

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é)流等高級功能

復雜輪詢邏輯：

采用 RxJS
優(yōu)點：處理競態(tài)條件、重試策略等復雜場景得心應手

需要精細控制：

自行封裝（推薦 usePolling 方案）
優(yōu)點：完全可控，適合特殊業(yè)務需求

責任編輯：趙寧寧來源：前端之神

Vue3 輪詢