Vue 中实现轮询请求的三种主流方案：vue-request、@vueuse/core 与 RxJS 实战解析

​ 

方案	特点	适用场景
vue-request	简洁易用，基于函数式调用，内置轮询、防抖、节流等特性	快速实现轮询功能
@vueuse/core	基于 Composition API，与 Vue 3 深度集成，提供 useIntervalFn 等工具函数	更加灵活控制轮询逻辑
rxjs	强大的响应式编程库，支持复杂的数据流处理	需要精细控制数据流和错误处理

方案详解与示例

1. 使用 vue-request 实现轮询请求

vue-request 是一个类 React 的 ahooks 风格的 Vue 数据请求 Hook 库，非常适合 Vue 3 + Composition API 项目。
安装：

 
npm install vue-request

示例代码 

1. import { defineComponent } from 'vue'
2. import useRequest from 'vue-request'
3. import axios from 'axios'
4. export default defineComponent({
5.   setup() {
6.     const fetchData = async () => {
7.       const res = await axios.get('/api/realtime-data')
8.       return res.data
9.     }
10.     const { data, loading } = useRequest(fetchData, {
11.       pollingWhenHidden: false, // 页面隐藏时不轮询
12.       pollingInterval: 5000,     // 每5秒请求一次
13.     })
14.     return () => (
15.       
16.         {loading.value ? '加载中...' : JSON.stringify(data.value)}
17.       
18.     )
19.   }
20. })

复制代码

 
优势：

• 内置轮询、缓存、错误重试等功能
  
• 支持自动取消请求
  
• 可与 Vue 组件生命周期良好配合
  

 
2. 使用 @vueuse/core 实现轮询

@vueuse/core 提供了大量 Vue 3 的组合式函数，其中 useIntervalFn 是实现轮询的理想选择。
安装：

 
npm install @vueuse/core

示例代码

1. import { defineComponent, ref } from 'vue'
2. import { useIntervalFn } from '@vueuse/core'
3. import axios from 'axios'
4. export default defineComponent({
5.   setup() {
6.     const data = ref(null)
7.     const loading = ref(false)
8.     const fetchData = async () => {
9.       loading.value = true
10.       try {
11.         const res = await axios.get('/api/realtime-data')
12.         data.value = res.data
13.       } catch (error) {
14.         console.error('请求失败:', error)
15.       } finally {
16.         loading.value = false
17.       }
18.     }
19.     const { pause, resume, isActive } = useIntervalFn(fetchData, 5000, {
20.       immediate: true,
21.       callback: fetchData
22.     })
23.     return () => (
24.       
25.         <button onClick={isActive.value ? pause : resume}>
26.           {isActive.value ? '暂停轮询' : '开始轮询'}
27.         </button>
28.         {loading.value ? '加载中...' : JSON.stringify(data.value)}
29.       
30.     )
31.   }
32. })

复制代码

优势：

• 精细控制轮询启动/暂停
  
• 支持组件卸载时自动清理定时器
  
• 可与其他组合函数结合使用（如 useFetch）
  

3. 使用 rxjs 实现轮询

RxJS 是一个强大的响应式编程库，适合需要构建复杂异步数据流的场景。
安装：

npm install rxjs

示例代码

1. import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
2. import { interval, Subscription, from } from 'rxjs'
3. import { switchMap } from 'rxjs/operators'
4. import axios from 'axios'
5. export default defineComponent({
6.   setup() {
7.     const data = ref(null)
8.     const loading = ref(false)
9.     const error = ref(null)
10.     let subscription: Subscription
11.     onMounted(() => {
12.       subscription = interval(5000).pipe(
13.         switchMap(() => {
14.           loading.value = true
15.           return from(axios.get('/api/realtime-data'))
16.         })
17.       ).subscribe({
18.         next: (res) => {
19.           data.value = res.data
20.           loading.value = false
21.         },
22.         error: (err) => {
23.           error.value = err.message
24.           loading.value = false
25.         }
26.       })
27.     })
28.     onUnmounted(() => {
29.       if (subscription) subscription.unsubscribe()
30.     })
31.     return () => (
32.       
33.         {loading.value && <p>加载中...</p>}
34.         {error.value && <p style="color: red;">{error.value}</p>}
35.         {data.value && <pre>{JSON.stringify(data.value, null, 2)}</pre>}
36.       
37.     )
38.   }
39. })

复制代码

 
优势：

• 构建复杂的数据流（如合并多个请求、节流、过滤）
  
• 错误处理更强大
  
• 支持取消订阅，避免内存泄漏
  

 轮询的应用场景分析

场景	描述	推荐方案
实时订单状态更新	用户查看订单状态是否已支付或完成	@vueuse/core 或 vue-request
后台任务进度监控	如文件上传、视频转码等长时间任务	rxjs（便于链式处理）
聊天应用中的新消息检测	当前页面未使用 WebSocket 时	vue-request（简洁高效）
数据大屏展示	多个图表定期刷新数据	@vueuse/core（可统一控制）

 轮询的注意事项

1. 性能优化：
控制轮询频率，避免频繁请求影响性能。页面不可见时暂停轮询（如使用 visibilitychange 事件）
2. 防止内存泄漏
在组件销毁时清除定时器或取消订阅
3. 错误处理机制
请求失败时进行重试或提示用户
4. 服务器压力
尽量减少并发请求数量，合理设置间隔时间
总结：
根据你的项目需求和技术栈，可以选择最适合的轮询方案。对于大多数中小型项目，推荐使用 vue-request 或 @vueuse/core；如果你有复杂的异步流程需求，rxjs 是更好的选择。
​
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

鼓励转贴优秀软件安全工具和文档！