本文讲解为何在异步获取 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 += `
${obj.field1}; ${obj.field2};`; // 直接点语法访问属性 } container.innerHTML = html; // 一次性写入，避免重复解析 }另一个重要细节是 DOM 就绪时机。虽然你用了 DOMContentLoaded，但在某些场景（如脚本在
底部内联），页面可能已加载完成。为增强兼容性，推荐如下模式：
if (document.readyState === "complete") {convertData(); } else {window.addEventListener("load", convertData); // 或用 DOMContentLoaded }⚠️ 注意事项：
- 永远不要在 then() 中写 func()（带括号），除非你明确需要立即执行并传其返回值；
- 避免在循环中反复修改 innerHTML，应累积字符串后一次性赋值；
- 使用 const/let 替代 var，防止变量提升和 作用域 混淆；
- 对用户可控数据，务必做 HTML 转义（本例为静态 JSON，可暂略，但生产环境需警惕）；
- 若后续需导出 CSV，建议直接从 data 对象生成字符串，而非依赖 DOM 内容——更可靠、更高效。
最终可运行的精简示例（含模拟 fetch）：
掌握 Promise 链的函数传递逻辑，是处理异步 DOM 更新的基础。记住：.then(f) 是“等前面做完再调 f”，而 .then(f()) 是“现在就调 f，把结果传给 then” —— 这一 区别，决定了你的数据能否被正确读取。
