本文详解 javascript 异步流程中因错误调用函数导致 dom 内容未就绪而读取为空的问题，重点纠正 `.then(print())` 的常见误用，并提供安全、可维护的 promise 链写法与最佳实践。
在使用 fetch 加载 JSON 数据并动态写入 DOM 后立即读取内容（如导出 CSV），却得到空字符串——这并非 DOM 更新延迟或渲染问题，而是Promise 链中函数被提前执行的经典陷阱。
核心错误出现在这一行：
.then(print())
此处 print() 被立即调用（返回 undefined），而非作为回调函数传递给 .then()。这意味着：
✅ fetch 请求尚未发起；
✅ showData() 还未运行；
❌ print() 已执行，此时
仍是空的，innerHTML 自然为空字符串。
✅ 正确写法：传递函数引用，而非调用结果
function convertData() {
fetch('info.json')
.then(response => response.json())
.then(data => showData(data)) // ✅ 返回 Promise（隐式）
.then(print) // ✅ 传递函数引用（不带括号）
.catch(error => console.error('Error:', error));
}或使用箭头函数显式包裹（等价且更清晰）：
.then(() => print()) // ✅ 延迟到前一个 Promise 完成后再执行
? 补充优化建议
-
避免重复 innerHTML +=（性能 & 安全隐患）
每次修改 innerHTML 都会触发 HTML 解析与重排。推荐先拼接字符串，最后一次性写入：function showData(data) { const container = document.getElementById("container"); let html = ""; for (const obj of data.data) { // 使用 const + for...of 更安全 html += `<br>${obj.field1}; ${obj.field2};`; // 直接点语法替代 [] 语法 } container.innerHTML += html; // 仅一次写入 } -
确保 DOM 就绪更健壮的方式
DOMContentLoaded 是合理起点，但若脚本在文档末尾加载，事件可能已触发。更稳妥写法：if (document.readyState === "complete") { convertData(); } else { document.addEventListener("DOMContentLoaded", convertData); } -
为导出 CSV 做准备：结构化数据优于 HTML 字符串
当前逻辑将格式化逻辑耦合到 DOM 渲染中，不利于复用。建议分离关注点：function generateCsvContent(data) { return data.data.map(obj => `${obj.field1},${obj.field2}`).join('\n'); } // 在链中直接使用： .then(data => { showData(data); // 渲染 UI const csv = generateCsvContent(data); // 准备导出 console.log("CSV content:", csv); return csv; })
? 总结
- ❌ 错误：.then(print()) → 立即执行，时机错乱；
- ✅ 正确：.then(print) 或 .then(() => print()) → 延迟执行，时机可控；
- ⚠️ 注意：DOM 写入是同步的，但必须确保发生在 fetch → json() → showData() 之后；
- ? 最佳实践：分离数据处理、UI 渲染与导出逻辑，提升可测试性与可维护性。
通过修正 Promise 链的函数传递方式，并辅以现代语法与结构优化，即可稳定获取动态写入的 DOM 内容，为后续 CSV 导出等操作奠定可靠基础。
