react 使用進度條獲取后端進度展示（setInterval、clearInterval）、antd之Progress

setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
setInterval(() => {//..方法},500) 和清除定時器clearInterval

1. 組件進度條
   引入組件
   import React, { Component } from 'react'; import { Progress } from 'antd';

點擊查看代碼

 const cacheProgress = (
          <div>
              {this.state.cacheProcess && this.state.cacheProcess.currentDetail?this.state.cacheProcess.currentDetail:null}
              <Progress
                  strokeColor={{
                      from: '#108ee9',
                      to: '#87d068',
                  }}
                  percent={ this.state.cacheProcess && this.state.cacheProcess.progress ? this.state.cacheProcess.progress :0 }
                  status="active"
              />
          </div>
      );

2. 定義變量
   

3. 開啟方法
   

4. 編寫向后端發送請求查詢進度， 直到100%后，停止發送

點擊查看代碼

 getRefreshStatus = () =>{
        let _this = this;
        if( _this.state.isSyncCached ){
            let id = setInterval(() => {
                if(undefined == _this.state.cacheProcess.code || undefined == _this.state.cacheProcess.code || _this.state.cacheProcess.code != '1' ){
                    getRefreshArrangeStatus({}, authority.importSchedual, respData => {
                        this.setState({ cacheProcess : respData ? respData :{code:'0'} });
                    })
                }else{
                    this.setState({
                        uploading: false,
                    });
                    clearInterval(id)
                }
            }, 500);
        }
    }