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

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;
}

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;
}

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();