1、主要逻辑代码

	// 定时器
	private timer: any;

	// 获取列表数据接口函数
	private getTable(page: number, rows: number): void {
    	let params: any = { page, rows };
    	if(this.$route.query.unit) {
      	params.unit = this.$route.query.unit || '';
    	};
    	Object.keys(this.form).forEach((k: string) => (this.form[k] ? (params[k] = this.form[k]) : ''));
    	this.setLoading(true);
    	deployList(params).then((res: any) => {
      	const { code, data } = res;
      	if (code === 1) {
        	this.pageTotal = data.cnt || 0;
        	this.tableData = data.data || [];
        	this.tableData.forEach((v: any) => {
          	v.commit_id = v.commit_id.slice(0,8);
        	});
      	};
      	+ this.timedTask();
    	});
 	 }

	// 轮询逻辑函数
	private timedTask(): void {
    	let onlineIds: string = this.tableData.filter((v: any) => v.is_success === 2 || v.is_success === 10).map((v: any) => v.id).join(',');
    	if(onlineIds) {
      	deployResultPoll(onlineIds).then((res: any) => {
        	const { code, data } = res;
        	if(code === 1) {
          	let list = data || [];
          	let stopTask = this.tableData.every((v: any) => v.is_success !== 2 && v.is_success !== 10);
          	this.tableData.forEach((v: any) => {
            	let target = list.find((s: any) => s.id === v.id);
            	if(target) {
              	v.is_success = target.is_success;
              	v.process.map((a: any, i: any) => {
                	a.step_name = target.process[i].step_name;
                	a.step_success = target.process[i].step_success;
              	})
            	}
          	});
          // 结束轮询
          if (stopTask) {
            clearInterval(this.timer);
            this.timer = null;
          };
        }
      })
    }
  }

 // 开始轮询
 private mounted(): void {
    this.getTable(1, 8);
    if(this.timer) {
      clearInterval(this.timer);
    } else {
      // 定时更新列表数据
      this.timer = setInterval(() => {
        this.timedTask();
      }, 60 * 1000);
    }
  }1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465

2、数据截图

列表返回数据

轮询接口的返回数据

timedTask函数主要数据

状态说明

0：失败
1：成功
2：进行中
10：未开始

3、测试及效果演示

这里用this.$set修改数据进行演示,为了演示，轮询时间设置为5秒。

	// 测试代码
	this.$set(this.tableData[1].process[1], 'step_success', 1)
	this.$set(this.tableData[1], 'now_step_name', 'DI验证')123

演示效果图

作者：SmallTeddy

链接：https://blog.csdn.net/SmallTeddy/article/details/109443333

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。