本文详解因错误调用 `print()` 导致 dom 内容读取为空的根本原因，通过修正 promise 链中的函数传递方式，确保 `print` 在数据渲染完成后执行，从而可靠获取已写入的 html 内容。
在使用 fetch + Promise.then() 构建异步数据流时，一个常见却隐蔽的错误是：在 .then() 中直接调用函数（如 .then(print())），而非传入函数引用（如 .then(print)）。这会导致函数立即执行，而非等待前序异步操作完成——正是该问题让 container.innerHTML 始终为空。
? 问题定位：.then(print()) vs .then(print)
原始代码中：
.then(data => showData(data)) .then(print()) // ❌ 错误：print 立即执行，此时 DOM 尚未更新！
print() 被立即调用，返回值（undefined）被传入 .then()，而 print 实际运行时机与 fetch 流程完全脱钩。此时 #container 仍是空的，innerHTML 自然为空字符串。
✅ 正确写法是传递函数引用：
立即学习“Java免费学习笔记（深入）”；
.then(data => showData(data)) .then(print) // ✅ 正确：print 将在 showData 完成后由 Promise 自动调用
或使用箭头函数显式包裹（等价且更清晰）：
.then(() => print()) // ✅ 明确表示“待前一步完成后再执行”
✅ 完整修复后的代码示例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<div id="container"></div>
<script>
// 更健壮的初始化：兼容页面已加载完成的情况
function convertData() {
fetch('info.json')
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(showData)
.then(print)
.catch(error => console.error('数据处理失败:', error));
}
function showData(data) {
const container = document.getElementById("container");
// ⚠️ 注意：避免频繁修改 innerHTML（性能差、会销毁事件监听器）
// 推荐构建完整字符串后一次性赋值
let html = '';
for (const obj of data.data) { // 使用 const + for...of 替代 var + for 循环
html += `<br>${obj.field1}; ${obj.field2};`; // 直接点语法访问属性
}
container.innerHTML = html; // 一次性写入，更高效安全
}
function print() {
const container = document.getElementById("container");
console.log('当前容器内容：', container.innerHTML);
// ✅ 此时必能读取到渲染后的 HTML
}
// 安全启动：防止 DOM 未就绪
if (document.readyState === 'complete') {
convertData();
} else {
window.addEventListener('DOMContentLoaded', convertData);
}
</script>
</body>
</html>? 关键优化与注意事项
- 避免 += innerHTML 循环拼接：每次赋值都会触发重排重绘，且可能意外移除已绑定的事件监听器。应先拼接完整字符串，再一次性赋值。
- 优先使用 const/let：替代 var 可避免变量提升和作用域污染，尤其在循环中更安全可靠。
- 属性访问用点语法：obj.field1 比 obj["field1"] 更简洁可读；方括号仅在键名含特殊字符或为动态变量时使用。
- 增加基础错误处理：检查 response.ok，避免静默失败。
- DOM 就绪判断更严谨：结合 DOMContentLoaded 和 document.readyState，确保脚本在任何加载状态下都能正确触发。
掌握 Promise 链中函数传递的语义差异，是编写可靠异步前端逻辑的基础。记住这个原则：.then(函数) 是注册回调，.then(函数()) 是立即执行并传入返回值——后者几乎总是逻辑错误的根源。
