fetch 中 response.xml 在多数浏览器返回 null，应先用 response.text() 获取字符串，再用 DOMParser 以 'application/xml' 解析，并检查 parsererror；无内置 XML 解析，需手动处理。
fetch 读取 XML 文件时 response.text() 和 response.xml 的区别
现代浏览器中 fetch 默认不自动解析 XML，response.xml 属性虽已存在，但仅在部分浏览器（如 Chrome 117+、Firefox 119+）中稳定支持，且要求响应头明确声明 Content-Type: application/xml 或 text/xml。多数情况下直接访问 response.xml 会返回 null。
更可靠的做法是先用 response.text() 获取字符串，再用 DOMParser 手动解析：
fetch('data.xml')
.then(r => r.text())
.then(str => {
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(str, 'application/xml');
// 检查解析错误
if (xmlDoc.querySelector('parsererror')) {
throw new Error('XML 解析失败');
}
return xmlDoc;
})
.catch(err => console.error(err));
处理跨域或非标准 Content-Type 的 XML 响应
后端若未正确设置 Content-Type（例如返回 text/plain），即使内容是合法 XML，DOMParser 仍能解析，但需显式指定 MIME 类型为 application/xml；否则可能触发 HTML 模式解析，导致节点结构异常。
- 始终在
parseFromString()中传入'application/xml'，不要依赖响应头 - 若服务端返回压缩内容（如
gzip），fetch会自动解压，无需额外处理 - 遇到 CORS 问题，确认服务端已设置
Access-Control-Allow-Origin，XML 无特殊跨域限制
对比 jQuery.ajax 的常见陷阱
习惯写 dataType: 'xml' 的人容易误以为 fetch 有对应机制。实际上：fetch 没有内置 XML 解析选项，也不识别 dataType；所有类型转换都需手动完成。
立即学习“前端免费学习笔记（深入）”；
典型错误写法：
// ❌ 错误：试图像 jQuery 那样期待自动 xml 解析
fetch('data.xml').then(r => r.xml); // 多数情况是 undefined
// ✅ 正确：明确分两步 —— 获取文本 + 主动解析
fetch('data.xml').then(r => r.text()).then(parseXML);
另外注意：response.json() 会校验格式并抛错，而 response.text() 几乎总成功，XML 解析错误必须由 DOMParser 后续检查（比如通过 parsererror 元素）。
封装一个可复用的 fetchXML 函数
避免每次重复写 DOMParser 逻辑，可以封装一层：
function fetchXML(url, init = {}) {
return fetch(url, { ...init, headers: { 'Accept': 'application/xml', ...init.headers } })
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.text();
})
.then(str => {
const parser = new DOMParser();
const doc = parser.parseFromString(str, 'application/xml');
if (doc.querySelector('parsererror')) {
throw new Error('XML parsing error');
}
return doc;
});
}
// 使用
fetchXML('config.xml')
.then(xmlDoc => console.log(xmlDoc.documentElement.tagName));
这个函数没做命名空间支持，如果 XML 含 xmlns，查询时需用 getElementsByTagNameNS，这点常被忽略。
