整合多个API接口数据到表格的有效方法
本文介绍如何通过调用多个API接口，并将获取到的不同字段数据整合到一个表格中进行展示。 我们将分别获取“串口输出接口ID”和“报文/频率”数据，并对“报文/频率”数据进行格式化处理。
步骤一：获取串口输出接口ID
首先，调用getserid接口获取串口输出接口ID列表。 以下代码片段展示了如何处理接口返回的数据，并提取必要的字段：
async function getserid() {
const seridlist = await api.getserialid();
const { data: res } = seridlist;
// 假设res.port_thruput格式为 "id1,rate1,thruput1,id2,rate2,thruput2..."
const result = res.port_thruput.split(",").reduce((acc, curr, index, array) => {
if (index % 3 === 0) {
const [portid, rate, thruput] = array.slice(index, index + 3);
const formattedportid = parseInt(portid).toString(16).padStart(2, '0'); // 将ID转换为16进制，并补零
if (formattedportid >= '01') { // 添加有效性校验
acc.push({ portId: formattedportid, rate, thruput });
}
}
return acc;
}, []);
return result;
}
步骤二：获取报文头和频率
针对每个获取到的串口ID，调用getpacketheaderfreq接口获取对应的报文头和频率信息。 以下代码展示了如何处理接口返回数据，并进行格式化：
async function getPacketHeaderFreq(portId) {
const id = { port_id: parseInt(portId, 10) };
const OutCfgList = await api.GetMsgRate(id);
const { data: res } = OutCfgList;
// 删除不需要的字段并格式化数据
const formattedData = Object.entries(res)
.filter(([_, value]) => value !== 0) // 过滤掉值为0的数据
.map(([key, value]) => `${key.replace('_FREQ', '').toUpperCase()}/${value}`)
.join('; '); // 使用分号分隔多个报文/频率
return formattedData;
}
步骤三：整合数据并渲染表格
最后，将步骤一和步骤二获取的数据整合，并渲染到el-table中。 这需要根据实际的表格结构进行调整。 以下是一个示例：
async function renderTableData() {
const portIds = await getserid();
const tableData = await Promise.all(portIds.map(async (item) => {
const formattedFrequency = await getPacketHeaderFreq(item.portId);
return { ...item, formattedFrequency };
}));
SerialForm.tableData = tableData;
}
renderTableData();
通过以上步骤，您可以有效地将来自多个API接口的数据整合到一个表格中，并进行必要的格式化处理，最终呈现清晰易懂的数据视图。 请根据实际的API接口返回数据结构和el-table的配置进行相应的代码调整。
