如何同时调用多个接口并在表格中渲染不同字段数据？-js教程-PHP中文网

如何同时调用多个接口并在表格中渲染不同字段数据？

DDD

发布： 2025-02-22 13:58:00

原创

680人浏览过

如何同时调用多个接口并在表格中渲染不同字段数据？

整合多个API接口数据到表格的有效方法

本文介绍如何通过调用多个API接口，并将获取到的不同字段数据整合到一个表格中进行展示。我们将分别获取“串口输出接口ID”和“报文/频率”数据，并对“报文/频率”数据进行格式化处理。

步骤一：获取串口输出接口ID

首先，调用getserid接口获取串口输出接口ID列表。以下代码片段展示了如何处理接口返回的数据，并提取必要的字段：

<code class="javascript">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;
}</code>

登录后复制

步骤二：获取报文头和频率

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

针对每个获取到的串口ID，调用getpacketheaderfreq接口获取对应的报文头和频率信息。以下代码展示了如何处理接口返回数据，并进行格式化：

<code class="javascript">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;
}</code>

登录后复制

步骤三：整合数据并渲染表格

最后，将步骤一和步骤二获取的数据整合，并渲染到el-table中。这需要根据实际的表格结构进行调整。以下是一个示例：

<code class="javascript">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();</code>

登录后复制

通过以上步骤，您可以有效地将来自多个API接口的数据整合到一个表格中，并进行必要的格式化处理，最终呈现清晰易懂的数据视图。请根据实际的API接口返回数据结构和el-table的配置进行相应的代码调整。

以上就是如何同时调用多个接口并在表格中渲染不同字段数据？的详细内容，更多请关注php中文网其它相关文章！