Vue实现前端列表界面轮询功能
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 || '
·
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);
}
}
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验证')
演示效果图
更多推荐
已为社区贡献8条内容
所有评论(0)