本文详解 javascript 异步流程中因错误调用函数导致 dom 内容未就绪而读取为空的问题，重点纠正 `.then(print())` 的常见误用，并提供安全、可维护的 promise 链写法与最佳实践。

在使用 fetch 加载 JSON 数据并动态写入 DOM 后立即读取内容（如导出 CSV），却得到空字符串——这并非 DOM 更新延迟或渲染问题，而是Promise 链中函数被提前执行的经典陷阱。

核心错误出现在这一行：

.then(print())

此处 print() 被立即调用（返回 undefined），而非作为回调函数传递给 .then()。这意味着：
✅ fetch 请求尚未发起；
✅ showData() 还未运行；
❌ print() 已执行，此时

✅ 正确写法：传递函数引用，而非调用结果

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 完成后再执行

? 补充优化建议

1. 避免重复 innerHTML +=（性能 & 安全隐患）
   每次修改 innerHTML 都会触发 HTML 解析与重排。推荐先拼接字符串，最后一次性写入：

   function showData(data) {
     const container = document.getElementById("container");
     let html = "";
     for (const obj of data.data) {  // 使用 const + for...of 更安全
       html += `
   ${obj.field1}; ${obj.field2};`; // 直接点语法替代 [] 语法
     }
     container.innerHTML += html; // 仅一次写入
   }

2. 确保 DOM 就绪更健壮的方式
   DOMContentLoaded 是合理起点，但若脚本在文档末尾加载，事件可能已触发。更稳妥写法：

   if (document.readyState === "complete") {
     convertData();
   } else {
     document.addEventListener("DOMContentLoaded", convertData);
   }

3. 为导出 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 导出等操作奠定可靠基础。