vue中轮询：推荐 vue-request、@vueuse/core、rxjs

一、vue-request（专为 Vue 设计的请求库）

vue-request 是 Vue 生态中专注于请求管理的库，内置轮询功能，核心优势：

自动处理请求时序：确保上一次请求完成后才发起下一次，避免重叠（类似 setTimeout 递归的效果，但无需手动实现）。
与 Vue 响应式深度集成：轮询的状态（loading、data、error）直接通过响应式变量暴露，可在模板中直接使用。
生命周期自动管理：组件卸载时自动停止轮询，无需手动清理。
丰富的轮询控制：支持 pollingInterval（轮询间隔）、pollingWhenHidden（页面隐藏时是否继续）、manual（手动触发）等配置。

javascript 复制代码

<script setup>
import { useRequest } from 'vue-request';
import { getMessage } from './api';

// 轮询请求：每 3 秒获取一次消息
const { data, loading, run, cancel } = useRequest(
  () => getMessage(),
  {
    pollingInterval: 3000, // 轮询间隔
    pollingWhenHidden: false, // 页面隐藏时暂停
    manual: false, // 自动开始轮询
  }
);
</script>

二、@vueuse/core（Vue 工具函数集合）

@vueuse/core 提供了 useIntervalFn 等工具，专为 Vue 场景封装定时器，优势：

自动清理定时器：基于 Vue 生命周期，组件卸载时自动清除，避免内存泄漏。
响应式控制：可通过 ref 动态控制轮询的开始 / 暂停（isActive）、间隔时间（interval）。
与其他工具联动：可结合 useDocumentVisibility 实现「页面可见时才轮询」等高级逻辑。

javascript 复制代码

<script setup>
import { useIntervalFn, useDocumentVisibility } from '@vueuse/core';
import { getMessage } from './api';

// 页面可见性（用于控制轮询）
const visibility = useDocumentVisibility();
const isVisible = computed(() => visibility.value !== 'hidden');

// 轮询逻辑
const { start, stop, isActive } = useIntervalFn(
  async () => {
    // 仅在页面可见时执行请求
    if (isVisible.value) {
      await getMessage();
    }
  },
  3000, // 间隔 3 秒
  { immediate: true } // 立即开始
);
</script>

三、rxjs（响应式编程库）

rxjs 基于「流」的概念处理异步逻辑，适合复杂轮询场景，优势：

强大的流控制：通过 interval、switchMap 等操作符，轻松实现「上一次请求未完成则忽略下一次」「错误重试」「动态调整间隔」等逻辑。
声明式编程：用链式调用描述轮询逻辑，可读性高，避免回调嵌套。
与 Vue 集成：可通过 toRef 将流转换为 Vue 响应式数据，在组件中使用。

javascript 复制代码

<script setup>
import { interval, of } from 'rxjs';
import { switchMap, retry, filter } from 'rxjs/operators';
import { getMessage } from './api';
import { toRef } from 'vue';

// 轮询流：每 3 秒一次，请求失败重试 2 次，只在有数据时更新
const message$ = interval(3000).pipe(
  switchMap(() => getMessage().pipe(retry(2))), // switchMap 确保只处理最新请求
  filter(Boolean) // 过滤空数据
);

// 转换为 Vue 响应式数据
const message = toRef(message$);
</script>