如何正确使用 Fetch API 动态填充下拉列表（Dropdown）

本文详解如何通过 javascript 的 `fetch()` 正确读取本地 json 文件并动态生成 `` 下拉选项，重点解决因事件重复绑定、异步处理不当或错误未捕获导致的选项不显示问题。

在构建基于静态资源的 WiFi 密码管理页面时，一个常见需求是：从 data/data.json 中读取房间信息，并自动填充到 下拉菜单中。但若下拉框始终为空，问题往往不出现在 JSON 格式本身（你的数据结构完全合法），而在于 JavaScript 异步逻辑与 DOM 加载时机的配合失误。

✅ 正确实现要点

1. 确保 DOMContentLoaded 仅监听一次
   原代码中若存在两处 document.addEventListener(‘DOMContentLoaded’, loadRoomNumbers)，会导致函数被调用两次（甚至可能因 DOM 已就绪而部分执行失败）。应严格保证该监听器全局唯一。

2. 推荐使用 async/await 提升可读性与错误控制力
   相比 .then().catch() 链式调用，async/await 更直观，且能自然使用 try/catch 捕获网络异常、JSON 解析失败等各类错误。

3. 必须校验 fetch 响应状态与数据结构
   response.ok 仅表示 HTTP 状态码在 200–299 范围；若 JSON 文件路径错误（如 404）、MIME 类型不匹配（如服务器未返回 application/json），或文件内容非法（如末尾多逗号），均会导致后续失败。

以下是经过验证的完整解决方案：

   Select your room:               Select room                

// JavaScript（推荐写法）document.addEventListener('DOMContentLoaded', loadRoomNumbers);  async function loadRoomNumbers() {   const roomSelect = document.getElementById('room');    try {const response = await fetch('data/data.json');      // ① 检查 HTTP 状态     if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);     }      // ② 解析 JSON —— 若格式错误会在此抛出 SyntaxError     const roomsData = await response.json();      // ③ 验证数据是否为数组（防意外空响应或对象）if (!Array.isArray(roomsData)) {throw new Error('Expected JSON array, got:' + typeof roomsData);     }      // ④ 清空默认选项以外的内容（可选，增强健壮性）roomSelect.innerHTML = 'Select room';      // ⑤ 动态添加选项     roomsData.forEach(roomData => {if (roomData.Room) {// 防止缺失 Room 字段的对象导致空白选项         const option = document.createElement('option');         option.value = roomData.Room;         option.textContent = roomData.Room;         roomSelect.appendChild(option);       }     });    } catch (error) {console.error('❌ Failed to load room list:', error);     // 可选：向用户提示友好错误（如显示警告 banner）// alert(' 无法加载房间列表，请检查网络或联系管理员。');   } }

⚠️ 常见陷阱与调试建议

• 路径问题 ：确认 data/data.json 相对于 HTML 文件的路径正确。可在 浏览器 开发者 工具 的 Network 标签页中查看该请求是否返回 200，或直接访问 http://localhost:8000/data/data.json 验证。
• CORS 限制：若直接双击打开 HTML（file:// 协议），现代浏览器会阻止 fetch 请求本地文件。务必通过本地服务器运行（如 VS Code 的 Live Server 插件、npx serve 或 Python 的 python -m http.server）。
• JSON 编码 问题：确保 data.json 保存为 UTF-8 无 BOM 格式，避免解析失败。
• DOM 元素不存在：document.getElementById(‘room’) 返回 null 时，说明 HTML 中 id=”room” 的 未正确渲染或 ID 拼写错误。

✅ 总结

下拉列表无数据显示，90% 源于异步加载未完成或错误静默失败。采用 async/await + try/catch 结构，配合 HTTP 状态与数据类型双重校验，不仅能快速定位问题（如 404、SyntaxError、null 引用），还能显著提升代码可维护性。切记：永远不要假设 fetch 一定成功，也永远不要忽略 DOM 元素是否存在。