vue3中实现接口轮询

Vue3 中实现接口轮询的方法

在 Vue3 中实现接口轮询可以通过以下几种方式完成，每种方式适用于不同的场景。

使用 setInterval

通过 JavaScript 的 setInterval 方法可以定期调用接口。需要注意在组件卸载时清除定时器以避免内存泄漏。

import { onMounted, onUnmounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    let intervalId;

    const fetchData = async () => {
      try {
        const response = await axios.get('your-api-endpoint');
        console.log(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    onMounted(() => {
      intervalId = setInterval(fetchData, 5000); // 每5秒轮询一次
    });

    onUnmounted(() => {
      clearInterval(intervalId);
    });

    return { fetchData };
  }
};

使用 setTimeout 递归调用

setTimeout 结合递归调用可以实现更灵活的轮询逻辑，例如根据接口返回结果动态调整轮询间隔。

import { onMounted, onUnmounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    let timeoutId;

    const fetchData = async () => {
      try {
        const response = await axios.get('your-api-endpoint');
        console.log(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        timeoutId = setTimeout(fetchData, 5000); // 递归调用
      }
    };

    onMounted(() => {
      fetchData();
    });

    onUnmounted(() => {
      clearTimeout(timeoutId);
    });

    return { fetchData };
  }
};

使用 Web Workers

对于长时间运行的轮询任务，可以使用 Web Workers 避免阻塞主线程。

// worker.js
self.onmessage = function(e) {
  setInterval(async () => {
    try {
      const response = await fetch('your-api-endpoint');
      const data = await response.json();
      self.postMessage(data);
    } catch (error) {
      self.postMessage({ error: error.message });
    }
  }, 5000);
};

// Vue 组件
import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    let worker;

    onMounted(() => {
      worker = new Worker('worker.js');
      worker.onmessage = (e) => {
        console.log(e.data);
      };
    });

    onUnmounted(() => {
      worker.terminate();
    });
  }
};

使用第三方库

如果需要更高级的功能，可以使用第三方库如 axios-retry 或 rxjs 实现轮询。

import { onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { interval } from 'rxjs';
import { switchMap } from 'rxjs/operators';

export default {
  setup() {
    let subscription;

    onMounted(() => {
      subscription = interval(5000).pipe(
        switchMap(() => axios.get('your-api-endpoint'))
      ).subscribe({
        next: (response) => console.log(response.data),
        error: (error) => console.error('Error:', error)
      });
    });

    onUnmounted(() => {
      subscription.unsubscribe();
    });
  }
};

动态调整轮询间隔

根据接口返回结果动态调整轮询间隔，例如在数据未更新时延长轮询时间。

import { onMounted, onUnmounted, ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    let intervalId = ref(null);
    let pollInterval = ref(5000);

    const fetchData = async () => {
      try {
        const response = await axios.get('your-api-endpoint');
        console.log(response.data);
        if (response.data.updated) {
          pollInterval.value = 5000;
        } else {
          pollInterval.value = 10000;
        }
        resetInterval();
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    const resetInterval = () => {
      clearInterval(intervalId.value);
      intervalId.value = setInterval(fetchData, pollInterval.value);
    };

    onMounted(() => {
      fetchData();
    });

    onUnmounted(() => {
      clearInterval(intervalId.value);
    });

    return { fetchData };
  }
};

以上方法可以根据实际需求选择适合的方式实现接口轮询。