Fetch API 默认不自动解析 XML，需用 response.text() 获取字符串后通过 DOMParser.parseFromString(xmlText, "text/xml") 转为 XMLDocument，再用 DOM 方法查询；解析失败时会生成 parsererror 元素，应主动检测。
Fetch API 默认不会自动解析 XML，需要手动将响应体转为 XML 文档对象（XMLDocument），再用 DOM 方法处理。关键在于设置正确的请求头（可选）、用 response.text() 获取原始字符串，再用 DOMParser 解析。
1. 发起请求并获取 XML 字符串
XML 响应通常不需要特别设置 Content-Type 请求头，但需确保服务端返回的是有效的 XML，并且响应头中 Content-Type 包含 xml（如 application/xml 或 text/xml）。Fetch 本身不关心类型，重点在后续解析：
- 调用
fetch(url)发起请求 - 用
response.text()读取响应体为字符串（不能直接用response.json()） - 检查
response.ok确保请求成功
2. 用 DOMParser 解析 XML 字符串
DOMParser 是浏览器内置的 XML/HTML 解析器。对 XML 字符串调用 parseFromString(str, "text/xml")，返回一个 XMLDocument 对象：
- 如果解析失败（如格式错误），返回的文档中会包含
<parsererror>元素，可通过doc.querySelector("parsererror")检测 - 推荐始终检查解析结果是否有效，避免后续操作报错
- 注意：不要用
"application/xml"作为第二个参数，标准值是"text/xml"
3. 查询和提取 XML 数据
得到 XMLDocument 后，可用熟悉的 DOM 方法遍历和提取内容，例如：
立即学习“Java免费学习笔记（深入）”；
-
doc.documentElement获取根元素 -
doc.getElementsByTagName("item")或doc.querySelectorAll("item")获取节点列表 -
node.textContent获取文本内容，node.getAttribute("attr")获取属性值 - 支持
forEach遍历 NodeList，配合解构提取字段
4. 完整示例代码
以下是一个安全、可复用的封装函数：
async function fetchAndParseXML(url) {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const xmlText = await response.text();
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlText, "text/xml");
const parserError = xmlDoc.querySelector("parsererror");
if (parserError) throw new Error("Invalid XML: " + parserError.textContent);
return xmlDoc;
}
// 使用示例
fetchAndParseXML("/api/data.xml")
.then(doc => {
const items = doc.querySelectorAll("item");
items.forEach(item => {
const title = item.querySelector("title")?.textContent || "";
const id = item.getAttribute("id") || "";
console.log({ id, title });
});
})
.catch(err => console.error("加载或解析失败:", err));
