本文详解为何在 `fetch` + `innerhtml` 动态写入 html 后调用 `print()` 会读到空字符串，并提供正确的 promise 链式调用方案、现代语法优化及健壮的页面加载处理方式。
在使用 JavaScript 异步获取数据并动态写入 DOM（如通过 container.innerHTML += ...）后，紧接着尝试读取该 DOM 内容却得到空字符串——这是前端开发中一个典型且易被忽视的执行时序错误。根本原因在于：.then(print()) 并非将 print 函数作为回调传入 Promise 链，而是立即执行 print()，此时 fetch 还未开始、showData 更未运行，container.innerHTML 自然为空。
✅ 正确写法：传递函数引用，而非调用结果
将 .then(print()) 改为 .then(print) 或 .then(() => print())：
function convertData() {
fetch('info.json')
.then(response => response.json())
.then(data => showData(data)) // ✅ 此处返回 undefined，但确保 DOM 已更新
.then(print) // ✅ 传递函数引用，待前一个 then 完成后执行
.catch(error => console.error('Error:', error));
}? 关键区别：print() 是调用并返回 undefined；print 是函数本身，由 Promise 链在适当时机自动调用。
⚠️ 补充问题：showData 的副作用与性能隐患
当前 showData 使用 innerHTML += 在循环中反复拼接并重写整个容器内容，这会导致：
- 每次 += 触发一次完整 DOM 解析与重排（reflow），性能极差；
- 若 data["data"] 较大，页面可能出现明显卡顿；
- 事件监听器（如有）会被意外销毁。
✅ 推荐重构为字符串拼接后一次性写入：
立即学习“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; // ✅ 单次写入，高效可靠
}?️ 健壮的初始化：避免 DOMContentLoaded 时机不确定性
原代码依赖 document.addEventListener('DOMContentLoaded', ...)，但若脚本在 DOM 加载完成后才执行（如动态插入），事件可能已被错过。更稳妥的方式是检查 document.readyState：
function init() {
if (document.readyState === "complete") {
convertData();
} else {
window.addEventListener("load", convertData); // ✅ wait for full load (incl. images)
}
}
init();? 注：load 事件比 DOMContentLoaded 更晚，确保所有资源（含图片、样式表）就绪；若仅需 DOM 就绪，可用 DOMContentLoaded，但需搭配 if/else 双重保障。
? 完整可运行示例（含模拟 fetch）
<!DOCTYPE html>
<html>
<head><title>CSV Export Demo</title></head>
<body>
<div id="container"></div>
<script>
// 模拟 JSON 响应
function mockFetch() {
const data = { data: [{ field1: "Alice", field2: "30" }, { field1: "Bob", field2: "25" }] };
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 container = document.getElementById("container");
container.innerHTML = data.data.map(obj =>
`${obj.field1}; ${obj.field2}`
).join("<br>");
}
function print() {
const container = document.getElementById("container");
console.log("Export-ready HTML:", container.innerHTML);
// ✅ 此时 container.innerHTML 已包含全部数据，可安全提取用于 CSV 导出
}
// 安全初始化
if (document.readyState === "complete") convertData();
else window.addEventListener("load", convertData);
</script>
</body>
</html>✅ 总结：关键要点速查
- ❌ 错误：.then(print()) → 立即执行，时机错乱；
- ✅ 正确：.then(print) 或 .then(() => print()) → 延迟执行，时机可控；
- ? 避免循环内 innerHTML += → 改用字符串累积 + 单次赋值；
- ? 优先使用 const/let 和点语法（obj.field1）提升可读性与安全性；
- ?️ 初始化逻辑需兼容“已加载”和“未加载”两种状态，推荐 readyState + load 组合。
遵循以上实践，即可彻底解决“写入后读不到”的问题，为后续 CSV 导出等操作奠定可靠的数据基础。
