本文详解因错误调用 `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()) // ✅ 明确表示“待前一步完成后再执行”
✅ 完整修复后的代码示例
? 关键优化与注意事项
- 避免 += innerHTML 循环拼接：每次赋值都会触发重排重绘，且可能意外移除已绑定的事件监听器。应先拼接完整字符串，再一次性赋值。
- 优先使用 const/let：替代 var 可避免变量提升和作用域污染，尤其在循环中更安全可靠。
- 属性访问用点语法：obj.field1 比 obj["field1"] 更简洁可读；方括号仅在键名含特殊字符或为动态变量时使用。
- 增加基础错误处理：检查 response.ok，避免静默失败。
- DOM 就绪判断更严谨：结合 DOMContentLoaded 和 document.readyState，确保脚本在任何加载状态下都能正确触发。
掌握 Promise 链中函数传递的语义差异，是编写可靠异步前端逻辑的基础。记住这个原则：.then(函数) 是注册回调，.then(函数()) 是立即执行并传入返回值——后者几乎总是逻辑错误的根源。
