JS调用API开发Jeopardy项目时categories字段读值异常导致表头渲染失败

• 核心触发点是异步执行时序错乱：setupAndStart中使用forEach遍历执行异步的getCategory请求，forEach本身不会等待内部异步操作完成，循环结束后立刻触发fillTable()执行。
• 此时全局categories数组还处于空状态，遍历取值时自然会返回undefined。你控制台打印能看到完整数组结构，是因为浏览器对类对象的控制台打印是实时引用快照，等你点开控制台查看时，之前的异步接口请求早就完成、数据已经写入categories了，这根本不是fillTable执行瞬间的数组状态。
• 存在隐藏的代码隐患：getCategory函数内的cluesArr没有加变量声明，会直接挂载到全局作用域，容易引发不可预期的变量覆盖问题。

• 替换掉无法阻塞异步的forEach写法，用Promise.all等待所有分类数据请求完成、categories填充完毕后再执行表格渲染：

  async function setupAndStart() {
    let myIds = await getCategoryIds();
    // 等待所有分类数据请求全部完成
    await Promise.all(myIds.map(id => getCategory(id)))
    fillTable();
  }
  

• 补上getCategory里的变量声明，避免全局污染：将cluesArr = []; 修改为let cluesArr = [];
• 打开fillTable中被注释的表头赋值逻辑，替换原来写死的占位文本：

  // 原写死的占位：newth.innerText = "Category" + i;
  newth.innerText = categories[i].title;
  

内容的提问来源于stack exchange，提问作者CodeLuvr