npm install vue-request

<script setup>
import { useRequest } from 'vue-request';

// 輪詢獲取數(shù)據(jù)示例
const { data, loading } = useRequest(
  () => axios.get('/api/data'),
  {
    // 每3秒輪詢一次
    pollingInterval: 3000,
    // 錯(cuò)誤重試策略
    pollingWhenHidden: false, // 頁面隱藏時(shí)暫停
    pollingErrorRetryCount: 3
  }
);
</script>

<template>
  <div v-if="loading">加載中...</div>
  <div v-else>{{ data }}</div>
</template>

// utils/usePolling.ts
import { ref, onUnmounted } from'vue';

exportfunction usePolling<T>(fn: () => Promise<T>, interval: number) {
const data = ref<T>();
const error = ref<Error>();
const isPolling = ref(true);

let timer: number;

const execute = async () => {
    try {
      data.value = await fn();
    } catch (err) {
      error.value = err asError;
    } finally {
      if (isPolling.value) {
        timer = setTimeout(execute, interval);
      }
    }
  };

const stop = () => {
    isPolling.value = false;
    clearTimeout(timer);
  };

// 自動(dòng)開始
  execute();

// 組件卸載時(shí)自動(dòng)清理
  onUnmounted(stop);

return { data, error, stop };
}

<script setup>
import { usePolling } from './utils/usePolling';

const { data, stop } = usePolling(
  () => fetch('/api/data').then(r => r.json()),
  5000
);
</script>

npm install @vueuse/core

<script setup>
import { useIntervalFn } from '@vueuse/core';

const data = ref();
const error = ref();

// 每5秒執(zhí)行一次
const { pause, resume } = useIntervalFn(async () => {
  try {
    data.value = await axios.get('/api/data');
  } catch (err) {
    error.value = err;
    pause(); // 出錯(cuò)時(shí)暫停
  }
}, 5000, { immediate: true });
</script>

npm install rxjs

<script setup>
import { interval, switchMap } from 'rxjs';
import { useObservable } from '@vueuse/rxjs';

const poll$ = interval(3000).pipe(
  switchMap(() => from(axios.get('/api/data')))
);

const data = useObservable(poll$);
</script>