前言

在 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 方案）
• ✅ 优点：完全可控，适合特殊业务需求

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。