跳到主要内容

自定义页面批量调用接口(前端方式)

本案例来自三方开发者「冯鹏」

1. 使用场景

本例介绍一下在宜搭自定义页面中如何批量调用接口且不被平台限流。

批量操作数据一般会在服务端发起调用(开放平台批量删除接口文档),不建议在前端调用。

前端调用可以用来做工具型的临时操作使用。

本案例主要学习异步批量操作时需要添加节流处理。

2. 实现功能

2.1. 创建数据表

2.2. 创建自定义页面

2.3. 配置页面功能

2.3.1. 获取数据在表格中展示

参考:自定义页面表格实现数据管理页功能

本例主要是将上述文档中的逐个删除升级为批量删除,其他功能不变。

2.3.2. 配置表格行选择器

开启表格行选择器并绑定下述函数:

// 选择活动
export function onSelectChange(selectedRowKeys, records) {
this.setState({
selectedTableDataRowKeys: selectedRowKeys,
});
}

2.3.3. 配置批量删除提示弹窗

绑定下述函数:

// 确认批量删除活动
export async function onBatchDeleteActivityOk() {
const { selectedTableDataRowKeys = [] } = this.state;
this.$('dialog_lqdgnbm3').set('confirmState', 'LOADING'); // 开启对话框加载状态
const batchDeleteLoading = this.utils.toast({
title: `删除中,预计需要 ${selectedTableDataRowKeys.length / 5} 秒...`,
type: 'loading',
});
const failedInstId = [];
// 循环调用删除接口
for (let i = 0; i < selectedTableDataRowKeys.length; i++) {
const delay = i === 0 ? 0 : 200;
await new Promise(((resolve) => {
// 注意节流,每次请求间隔 200 ms
setTimeout(async () => {
try {
await this.dataSourceMap.deleteData.load({
formInstId: selectedTableDataRowKeys[i],
});
} catch (e) {
// 把失败的实例 id 收集起来
failedInstId.push(selectedTableDataRowKeys[i]);
}
resolve();
}, delay);
}));
}
this.$('dialog_lqdgnbm3').set('confirmState', 'NORMAL'); // 关闭对话框加载状态
this.$('dialog_lqdgnbm3').hide();
batchDeleteLoading();
this.utils.toast({
title: `批量删除完毕,失败${failedInstId.length}`,
type: 'success',
});
setTimeout(() => {
this.setState({
tableIsLoading: true,
selectedTableDataRowKeys: [],
});
this.getData(); // 获取数据
}, 1000);
}

2.3.4. 配置表格顶部操作

绑定下述函数:

// 批量删除活动弹窗
export function onBatchDeleteActivityDialog(rowData) {
const { selectedTableDataRowKeys = [] } = this.state;
if (!selectedTableDataRowKeys.length) {
this.utils.toast({
title: '当前未选中任何活动',
type: 'warning',
});
return;
}
this.$('dialog_lqdgnbm3').show(() => {
this.$('numberField_lqdgnbm4').setValue(selectedTableDataRowKeys.length);
});
}

3. 实现效果

4. 在线试玩

Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4