React中用qs库发请求后，如何读取XML响应的PatientID属性？

现有React代码 #

const urlEncodePostData = qs.stringify(postData);
post(url, urlEncodePostData).then(
  (response) => {
    const { data } = response;
    const xmlData = response.data;
    const rowData = loadRowData(xmlData, 'value');
    if (rowData[0].value != null) {
      formSubmitedMessage = rowData[0].value;
    }

服务器返回的XML响应 #

<XML>
<row ID="3123" PatientID="3454">
</row>
</xml>

解决方案 #

你现有代码里的loadRowData看起来是用来提取XML元素的文本值，但你需要读取的是row元素的属性，所以得换一种方式解析XML：

1. 用原生DOMParser解析XML字符串
   在浏览器环境下，直接用DOMParser把XML字符串转成DOM对象：

   const parser = new DOMParser();
   const xmlDoc = parser.parseFromString(xmlData, "text/xml");
   

2. 定位row元素并读取PatientID属性
   用DOM选择器找到目标元素，再通过getAttribute方法获取属性值：

   const rowElement = xmlDoc.querySelector('row');
   const patientId = rowElement?.getAttribute('PatientID');
   

3. 整合到现有代码中
   修改后的完整代码片段如下：

   const urlEncodePostData = qs.stringify(postData);
   post(url, urlEncodePostData).then(
     (response) => {
       const { data: xmlData } = response; // 解构简化变量
       const parser = new DOMParser();
       const xmlDoc = parser.parseFromString(xmlData, "text/xml");
       
       const rowElement = xmlDoc.querySelector('row');
       if (rowElement) {
         const patientId = rowElement.getAttribute('PatientID');
         // 这里可以添加对patientId的后续处理逻辑
         console.log('获取到的PatientID:', patientId);
       }
     }
   );
   

注意事项 #

• 如果loadRowData是自定义工具函数，它大概率只处理XML元素的文本节点，不支持提取属性，因此直接用原生DOM解析方法更直接。
• 加入rowElement的存在判断，避免因响应格式异常导致代码报错。

内容的提问来源于stack exchange，提问作者tRuEsAtM