整合多个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的配置进行相应的代码调整。
以上就是如何同时调用多个接口并在表格中渲染不同字段数据？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/190929.html
微信扫一扫 
支付宝扫一扫 
![Win10与Ubuntu 18.04双系统安装。（Win10引导Linux）[通俗易懂]](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/175254039529565.jpg)
![Win10与Ubuntu 18.04双系统安装。（Win10引导Linux）[通俗易懂]](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/175254039878675.jpg)
![Win10与Ubuntu 18.04双系统安装。（Win10引导Linux）[通俗易懂]](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/175254039840102.jpg)
![Win10与Ubuntu 18.04双系统安装。（Win10引导Linux）[通俗易懂]](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/175254040055572.jpg)
