前言

在 Vue3 中实现轮询请求，以下是几个值得推荐的解决方案和库（包含原生方案和第三方库），我根据实际开发经验为你整理推荐清单：

方案	特点	适用场景	包大小	文档评级
vue-request	功能全面的请求库，内置轮询	需要完整请求管理	5.2kb	⭐⭐⭐⭐
axios + 自封装	灵活可控，需自行处理	简单轮询需求	0kb	⭐⭐
rxjs	响应式编程库	复杂轮询逻辑	32kb	⭐⭐⭐
@vueuse/core	组合式API工具库	组合式API项目	12kb	⭐⭐⭐⭐

具体实现方案

1. 推荐首选：vue-request（专为Vue3设计）

npm install vue-request

<script setup>
import { useRequest } from 'vue-request';

// 轮询获取数据示例
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秒执行一次
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
• ✅ 优点：无需额外依赖，组合式API友好
• ⚠️ 注意：需自行处理错误和清理

完整请求管理

• 选择 vue-request
• ✅ 优点：内置错误重试、缓存、节流等高级功能

复杂轮询逻辑

• 采用 RxJS
• ✅ 优点：处理竞态条件、重试策略等复杂场景得心应手

需要精细控制

• 自行封装（推荐 usePolling 方案）
• ✅ 优点：完全可控，适合特殊业务需求

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴！

優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。