Vue3如何处理异步任务轮询

import { onUnmounted, ref } from 'vue';
import { TimeUnit, toMilliseconds } from '@tmp/utils';

export type Cleanup = () => any;
export type CallbackReturn = void | Cleanup;
export type Callback = (...args: any[]) => CallbackReturn | Promise<CallbackReturn>;

export const useIntervalAsync = (callback: Callback, delay: number, unit: TimeUnit = 'millisecond') => {
  const timeout = ref<number | null>(null);
  const canceled = ref<boolean>(false);
  const cleanup = ref<Cleanup | void>();

  // 将延迟时间转换为毫秒
  delay = toMilliseconds(delay, unit);

  const run: TimerHandler = async () => {
    if (canceled.value) {
      return;
    }
    // 清理之前的回调函数
    if (typeof cleanup.value === 'function') {
      cleanup.value();
    }
    // 执行回调函数并获取清理函数
    cleanup.value = await Promise.resolve(callback());
    // 设置下一次任务轮询的定时器
    timeout.value = globalThis.setTimeout(run, delay);
  };

  // 初始化任务轮询
  run();

  // 刷新任务轮询，取消当前定时器，重新执行回调函数
  const flush = () => {
    timeout.value && globalThis.clearTimeout(timeout.value);
    run();
  };

  // 取消任务轮询，清理定时器和回调函数
  const cancel = () => {
    timeout.value && globalThis.clearTimeout(timeout.value);
    canceled.value = true;
    if (typeof cleanup.value === 'function') {
      cleanup.value();
    }
  };

  // 恢复任务轮询，重新启动定时器
  const recover = () => {
    canceled.value = false;
    flush();
  };

  // 在组件卸载时取消任务轮询
  onUnmounted(() => {
    cancel();
  });

  return {
    flush,
    cancel,
    recover,
  };
};

export default useIntervalAsync;

<script lang="ts" setup>
import { useIntervalAsync } from '@/hooks/useIntervalAsync';
const { flush, cancel, recover } = useIntervalAsync(async () => {
  let timeout: any = null;
  await new Promise((resolve) => {
    timeout = setTimeout(() => {
      console.log('模拟异步事件');
      resolve('');
    }, 2000);
  });
  return () => {
    clearTimeout(timeout);
  };
}, 1000);
</script>
<template>
  <div>
    <button @click="flush">刷新</button>
    <button @click="cancel">取消</button>
    <button @click="recover">恢复</button>
  </div>
</template>