usePolling

2023年05月11日

柏拉文

越努力，越幸运

一、认识

---

二、实现

---

2.1 usePolling

import { onUnmounted, ref, watch } from 'vue'

export default function usePolling(
  cb: () => Promise<boolean>,
  timeout = 1000
): [startPolling: () => void, endPolling: () => void] {
  const countTime = ref(0)
  const timer: any = ref(null)

  const stopWatch = watch(countTime, () => {
    if (countTime.value > 0) {
      clearTimeout(timer.value)
      timer.value = setTimeout(() => {
        cb()
          .then((res) => {
            if (res) {
              countTime.value += 1
            }
          })
          .catch(() => {
            countTime.value = 0
          })
      }, timeout)
    }
  })

  onUnmounted(() => {
    stopWatch()
  })

  const startPolling = () => {
    countTime.value += 1
  }
  const endPolling = () => {
    countTime.value = 0
  }

  return [startPolling, endPolling]
}

2.2 usePreparePolling

export default function usePreparePolling(
  getResultRequest: () => Promise<{ data: { status: number } }>,
  finishedCallback: () => void
) {
  return async function () {
    try {
      const result = await getResultRequest()
      if (!result.data.status) {
        return true
      } else {
        finishedCallback()
        return false
      }
    } catch (error: any) {
      return false
    }
  }
}

2.3 useHandlePolling

import usePolling from './usePolling'
import usePreparePolling from './usePreparePolling'

export default function useHandlePolling(
  sendDataRequest: () => Promise<{ data: { status: number } }>,
  getResultRequest: () => Promise<{ data: { status: number } }>,
  finishedCallback: () => void
) {
  return async function () {
    await sendDataRequest()
    const preparePolling = usePreparePolling(getResultRequest, finishedCallback)
    const [startPolling] = usePolling(preparePolling)
    startPolling()
  }
}

三、调用

---

<template>
  <div></div>
</template>

<script setup lang="ts">
import useHandlePolling from "./composables/useHandlePolling.ts"

function sendData(): Promise<{ data: { status: number } }> {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('sendData')
      resolve({ data: { status: 1 } })
    }, 2000)
  })
}

function getResult(): Promise<{ data: { status: number } }> {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('getResult')
      resolve({ data: { status: 0 } })
    }, 2000)
  })
}

function finishedCallback() {
  console.log('接口完成啦')
}

const handlePolling = useHandlePolling(sendData,getResult,finishedCallback);
handlePolling();
</script>