前端数据按需加载策略：利用两次API调用实现用户详情动态展示

<table id="table">     <thead>         <tr>             <th colspan="3">用户姓名</th>             <th>操作</th>         </tr>     </thead>     <tbody>         <!-- 用户列表将在此处动态生成 -->     </tbody> </table>  <!-- 用于显示用户详情的对话框 --> <dialog id="dialog"></dialog>

const table = document.getElementById('table'); const dialog = document.getElementById('dialog'); // 获取对话框元素  window.addEventListener("DOMContentLoaded", async () => {     try {         // 1. 发起第一次API请求，获取用户列表         const response = await fetch('/api/users');         if (!response.ok) {             throw new Error(`HTTP error! status: ${response.status}`);         }         const users = await response.JSon();          // 如果没有用户数据，则直接返回         if (!users || users.length === 0) {             console.warn("No users found.");             return;         }          // 使用DocumentFragment优化DOM操作，避免频繁重绘         const fragment = document.createDocumentFragment();          // 遍历用户数据，动态创建表格行         for (const user of users) {             if (!user || !user.id || !user.name) continue; // 确保数据有效性              const row = document.createElement('tr');             row.innerHTML = `                 <td colspan="3">${user.name}</td>                 <td>                     <button onclick="fetchUserById(this)" class="more" data-id="${user.id}">                         <span class="material-symbols-outlined">visibility</span>                     </button>                 </td>             `;             fragment.appendChild(row);         }          // 将所有行一次性添加到表格的tbody中         table.querySelector('tbody').appendChild(fragment);      } catch (error) {         console.error("Failed to load users:", error);         // 可以根据需要在此处显示错误信息给用户     } });

async function fetchUserById(button) {     // 1. 从按钮的data-id属性中获取用户ID     const userId = button.dataset.id;     if (!userId) {         console.error("User ID not found on button.", button);         return;     }      try {         // 2. 发起第二次API请求，获取单个用户详情         const response = await fetch(`/api/user/${userId}`);         if (!response.ok) {             throw new Error(`HTTP error! status: ${response.status}`);         }         const userDetails = await response.json();          // 如果之前对话框已打开，先关闭         dialog.close();          // 3. 将获取到的用户详情渲染到对话框中         dialog.innerHTML = `             <h2>${userDetails.name} 的详细信息</h2>             <p><strong>邮箱:</strong> ${userDetails.email || 'N/A'}</p>             <p><strong>性别:</strong> ${userDetails.gender || 'N/A'}</p>             <p><strong>状态:</strong> ${userDetails.status || 'N/A'}</p>             <p><strong>其他信息:</strong> ${userDetails.otherInfo || 'N/A'}</p>             <button onclick="dialog.close()">关闭</button>         `;          // 4. 打开对话框         dialog.showModal(); // showModal() 会创建一个模态对话框，阻止用户与对话框外的元素交互     } catch (error) {         console.error(`Failed to fetch details for user ${userId}:`, error);         // 可以显示一个错误提示给用户         alert(`加载用户详情失败：${error.message}`);     } }