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

示例代码

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 () => (

      <div>

        {loading.value ? 加载中… : JSON.stringify(data.value)}

      </div>

    )

  }

})

点击并拖拽以移动

优势：

内置轮询、缓存、错误重试等功能

支持自动撤销请求

可与 Vue 组件生命周期良好配合

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

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

安装：

npm install @vueuse/core

示例代码

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 () => (

      <div>

        <button onClick={isActive.value ? pause : resume}>

          {isActive.value ? 暂停轮询 : 开始轮询 }

        </button>

        {loading.value ? 加载中… : JSON.stringify(data.value)}

      </div>

    )

  }

})

点击并拖拽以移动

优势：

精细控制轮询启动/暂停

支持组件卸载时自动清理定时器

可与其他组合函数结合使用（如 useFetch）

3. 使用 rxjs 实现轮询

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

安装：

npm install rxjs

示例代码

import { defineComponent, onMounted, onUnmounted, ref } from vue

import { interval, Subscription, from } from rxjs

import { switchMap } from rxjs/operators

import axios from axios

export default defineComponent({

  setup() {

    const data = ref(null)

    const loading = ref(false)

    const error = ref(null)

    let subscription: Subscription

    onMounted(() => {

      subscription = interval(5000).pipe(

        switchMap(() => {

          loading.value = true

          return from(axios.get( /api/realtime-data ))

        })

      ).subscribe({

        next: (res) => {

          data.value = res.data

          loading.value = false

        },

        error: (err) => {

          error.value = err.message

          loading.value = false

        }

      })

    })

    onUnmounted(() => {

      if (subscription) subscription.unsubscribe()

    })

    return () => (

      <div>

        {loading.value && <p>加载中…</p>}

        {error.value && <p style=”color: red;”>{error.value}</p>}

        {data.value && <pre>{JSON.stringify(data.value, null, 2)}</pre>}

      </div>

    )

  }

})

点击并拖拽以移动

优势：

构建复杂的数据流（如合并多个请求、节流、过滤）

错误处理更强劲

支持撤销订阅，避免内存泄漏

轮询的应用场景分析

场景 描述 推荐方案

实时订单状态更新 用户查看订单状态是否已支付或完成 @vueuse/core 或 vue-request

后台任务进度监控 如文件上传、视频转码等长时间任务 rxjs（便于链式处理）

聊天应用中的新消息检测https://www.naquan.com/ 当前页面未使用 WebSocket 时 vue-request（简洁高效）

数据大屏展示 多个图表定期刷新数据 @vueuse/core（可统一控制）

轮询的注意事项

1. 性能优化：

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

2. 防止内存泄漏

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

3. 错误处理机制

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

4. 服务器压力

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

总结：

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