本文讲解为何在异步获取 json 数据并写入 html 后立即读取 `innerhtml` 会返回空字符串，并提供基于 promise 链的正确调用方式、避免常见陷阱（如误调用函数）、以及现代语法优化建议。
在使用 fetch 异步加载 JSON 并动态更新页面内容时，一个典型误区是：在 Promise 链中错误地立即执行函数，而非将其作为回调传入。你原始代码中的关键问题就出在这里：
.then(print()) // ❌ 错误：print() 立即执行，返回 undefined，被当作 then 的参数
这行代码并非等待前序操作完成后再调用 print()，而是在 fetch 发起前就执行了 print() —— 此时 DOM 尚未更新，container.innerHTML 自然为空字符串。
✅ 正确做法是：将函数名（不带括号）或箭头函数作为参数传递，确保它在上一个 then 完成后才执行：
.then(print) // ✅ 传入函数引用 // 或 .then(() => print()) // ✅ 传入延迟执行的函数
此外，还需注意 showData() 函数本身存在隐式副作用：它通过 += 拼接 HTML 字符串，但未清空容器初始状态，且频繁操作 innerHTML 可能引发性能与安全问题（如 XSS 风险）。更健壮的写法是先构建完整字符串，再一次性赋值：
立即学习“Java免费学习笔记（深入）”；
function showData(data) {
const container = document.getElementById("container");
let html = ""; // 初始化空字符串
for (const obj of data.data) { // 使用 for...of + const，更安全清晰
html += `<br>${obj.field1}; ${obj.field2};`; // 直接点语法访问属性
}
container.innerHTML = html; // 一次性写入，避免重复解析
}另一个重要细节是 DOM 就绪时机。虽然你用了 DOMContentLoaded，但在某些场景（如脚本在 <body> 底部内联），页面可能已加载完成。为增强兼容性，推荐如下模式：
if (document.readyState === "complete") {
convertData();
} else {
window.addEventListener("load", convertData); // 或用 DOMContentLoaded
}⚠️ 注意事项：
- 永远不要在 then() 中写 func()（带括号），除非你明确需要立即执行并传其返回值；
- 避免在循环中反复修改 innerHTML，应累积字符串后一次性赋值；
- 使用 const/let 替代 var，防止变量提升和作用域混淆；
- 对用户可控数据，务必做 HTML 转义（本例为静态 JSON，可暂略，但生产环境需警惕）；
- 若后续需导出 CSV，建议直接从 data 对象生成字符串，而非依赖 DOM 内容——更可靠、更高效。
最终可运行的精简示例（含模拟 fetch）：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<div id="container"></div>
<script>
function mockFetch() {
const data = { data: [{field1:"A",field2:"X"},{field1:"B",field2:"Y"}] };
return Promise.resolve(new Response(JSON.stringify(data)));
}
function convertData() {
mockFetch()
.then(r => r.json())
.then(showData)
.then(print)
.catch(console.error);
}
function showData(data) {
const el = document.getElementById("container");
el.innerHTML = data.data.map(d => `${d.field1}; ${d.field2}`).join("<br>");
}
function print() {
console.log("Export-ready HTML:", document.getElementById("container").innerHTML);
}
if (document.readyState === "complete") convertData();
else window.addEventListener("load", convertData);
</script>
</body>
</html>掌握 Promise 链的函数传递逻辑，是处理异步 DOM 更新的基础。记住：.then(f) 是“等前面做完再调 f”，而 .then(f()) 是“现在就调 f，把结果传给 then” —— 这一区别，决定了你的数据能否被正确读取。
