Vue3中使用swrv实现可变refreshInterval的动态轮询问题

AI 小北

2026-8-14

动态修改swrv的refreshInterval实现方案

swrv的配置项支持响应式参数，你可以通过把refreshInterval绑定到响应式变量上，让swrv自动感知变化并调整轮询间隔。以下是具体实现：

核心思路

用响应式变量（Vue的ref或React的useState）存储当前轮询间隔
将变量以函数形式传入swrv的refreshInterval配置中（确保swrv能捕获到变量更新）
点击按钮时直接更新响应式变量即可切换轮询间隔

Vue 3示例代码

<script setup>
import useSWRV from 'swrv'
import { ref } from 'vue'

// 初始化轮询间隔为5秒
const refreshInterval = ref(5000)
const fetcher = () => fetch('/api/data').then(res => res.json())

const { data, error } = useSWRV('some key', fetcher, {
  refreshInterval: () => refreshInterval.value
})

// 点击按钮切换为10秒轮询
const changeInterval = () => {
  refreshInterval.value = 10000
}
</script>

<template>
  <button @click="changeInterval">改为10秒轮询</button>
  <div v-if="data">{{ data }}</div>
  <div v-if="error">请求出错：{{ error }}</div>
</template>

React示例代码

import useSWRV from 'swrv'
import { useState } from 'react'

function App() {
  // 初始化轮询间隔为5秒
  const [refreshInterval, setRefreshInterval] = useState(5000)
  const fetcher = () => fetch('/api/data').then(res => res.json())

  const { data, error } = useSWRV('some key', fetcher, {
    refreshInterval: () => refreshInterval
  })

  // 点击按钮切换为10秒轮询
  const changeInterval = () => {
    setRefreshInterval(10000)
  }

  return (
    <div>
      <button onClick={changeInterval}>改为10秒轮询</button>
      {data && <div>{JSON.stringify(data)}</div>}
      {error && <div>请求出错：{error.message}</div>}
    </div>
  )
}

export default App