前端实现环形进度条示例

当后端接口没有给你进度参数时候，你只能自己造了，主要是根据后端返回的status进行判断结果，status分别是'failed success running'

采用的组件是antd的Progress组件

<Progress
  width={30}
  type="circle"
  percent={percent}
  status={SituationObj[situation]?.status}
  style={{ display: situation ? 'inline' : 'none' }}
/>

三种状态先定义一个对象,key是我们的进度，status是进度条的状态

  const SituationObj = {
    success: { key: 'success', status: 'success' },
    running: { key: 'running', status: 'active' },
    failed: { key: 'failed', status: 'exception' },
  };

自定义进度的方法

 let reportCal: NodeJS.Timeout = null;
 const immediateExecution: boolean = true; // 打开页面后是否立即执行，可作为参数传入
  
 const startLoop = () => {
    // 自定义进度
    let intPercent = 0;
    let addPercent = 45;
    let latestTime;
    let requestNum = 0;

    const loop = async requestTime => {
      const status = await loopFunction();
      if (requestTime !== latestTime) {
        requestNum += 1;
        if (requestNum > 2) {
          requestNum = 0;
          return status;
        }
        return false;
      }
      if (status === 'success') {
        fetchTable();
        await getCallMarginLog({
          fromDate: date.format('YYYY-MM-DD'),
          toDate: date.format('YYYY-MM-DD'),
        });
      }
      return status;
    };

    clearInterval(reportCal);
    reportCal = setInterval(async () => {
      latestTime = new Date().valueOf();
      const loopStatus = await loop(latestTime);
      if (loopStatus === false) return;

      if (isNumber(loopStatus)) {
        setPercent(loopStatus);
        return;
      }

      if (loopStatus !== SituationObj.running.key) {
        setPercent(100);
        setSituation(loopStatus);
        clearInterval(reportCal);
        return;
      }

      if (intPercent < 99) {
        intPercent += addPercent;
        setPercent(intPercent);
        setSituation(SituationObj.running.key);
        addPercent = Math.round(addPercent / 2);
      }
    }, 1000);
  };

useEffect

  useEffect(() => {
    clearInterval(reportCal);
    if (immediateExecution) startLoop();
    return () => {
      clearInterval(reportCal);
    };
  }, []);