当前位置：首页 > news >正文

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

news 2025/7/26 20:35:54

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

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

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

<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 实现「页面可见时才轮询」等高级逻辑。

<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 响应式数据，在组件中使用。

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