Vue中实现轮询请求的三种主流方案详解_vue.js

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

import { defineComponent } from 'vue'import useRequest from 'vue-request'import axios from 'axios'export default defineComponent({ setup() { const fetchData = async () => { const res = await axios.get('/api/realtime-data') return res.data } const { data, loading } = useRequest(fetchData, { pollingWhenHidden: false, // 页面隐藏时不轮询 pollingInterval: 5000, // 每5秒请求一次 }) return () => ( {loading.value ? '加载中...' : JSON.stringify(data.value)} ) }})

优势：

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

import { defineComponent, ref } from 'vue'import { useIntervalFn } from '@vueuse/core'import axios from 'axios'export default defineComponent({ setup() { const data = ref(null) const loading = ref(false) const fetchData = async () => { loading.value = true try { const res = await axios.get('/api/realtime-data') data.value = res.data } catch (error) { console.error('请求失败:', error) } finally { loading.value = false } } const { pause, resume, isActive } = useIntervalFn(fetchData, 5000, { immediate: true, callback: fetchData }) return () => ( {loading.value ? '加载中...' : JSON.stringify(data.value)} ) }})

优势：

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

控制轮询频率，避免频繁请求影响性能。页面不可见时暂停轮询（如使用 visibilitychange 事件）

在组件销毁时清除定时器或取消订阅

请求失败时进行重试或提示用户

尽量减少并发请求数量，合理设置间隔时间

根据你的项目需求和技术栈，可以选择最适合的轮询方案。对于大多数中小型项目，推荐使用 vue-request 或 @vueuse/core；如果你有复杂的异步流程需求，rxjs 是更好的选择。

到此这篇关于Vue中实现轮询请求的三种主流方案详解的文章就介绍到这了,更多相关Vue轮询请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

上一篇：React二维数组的几种声明和使用过程React

下一篇：前端缓存策略及其应用场景详解javascript技