2025了，Vue3 中做轮询的几种最新方式

最新推荐文章于 2025-10-06 16:31:48 发布

原创最新推荐文章于 2025-10-06 16:31:48 发布 · 735 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端

在 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>

选型建议