解决JavaScript读取JSON首元素后无法赋值给按钮时间的问题

核心问题出在异步函数的返回值特性：你写的fetchFirstItemFromJSON()是async函数，它执行后会立即返回一个Promise对象，而不是你想要的时间字符串。直接把这个Promise赋值给buttons数组的time属性，代码后续逻辑会因为拿到的不是预期的字符串类型报错；而test1是同步定义的常量，是直接的字符串值，所以能正常运行。

解决步骤与示例代码 #

1. 先同步定义按钮数组的基础结构，给time留默认值或占位符
2. 单独写一个初始化函数，用await等待异步函数拿到实际时间值后，再修改数组的对应属性
3. 处理异步可能出现的错误（比如文件读取失败）

// 你的异步读取函数（保持不变）
async function fetchFirstItemFromJSON() {
  const res = await fetch('./your-time-array.json'); // 替换为你的JSON文件路径
  const timeArray = await res.json();
  return timeArray[0];
}

// 先定义初始按钮数组
let buttons = [
  {
    text: "第一个按钮",
    time: "默认时间", // 先设默认值
    // 其他按钮配置项...
  },
  // 其他按钮...
];

// 异步初始化按钮的time值
async function initButtonTime() {
  try {
    const firstTime = await fetchFirstItemFromJSON();
    // 替换第一个按钮的time值
    buttons[0].time = firstTime;
    // 这里执行需要用到最新buttons配置的逻辑（比如渲染按钮）
    renderButtons();
  } catch (err) {
    console.error('读取时间JSON文件出错:', err);
    // 错误情况下可以保留默认值，或者设置备用值
  }
}

// 调用初始化函数
initButtonTime();

// 示例渲染函数（根据你的实际场景调整）
function renderButtons() {
  console.log('更新后的按钮配置:', buttons);
  // 这里写渲染按钮到页面的逻辑
}

关键说明 #

• 异步操作不能直接在同步的数组定义中使用，因为数组定义是立即执行的，此时异步请求还没完成，拿不到实际值
• 必须用await等待Promise状态变为resolved，才能拿到JSON返回的时间字符串
• 加上try/catch可以处理文件不存在、网络错误等异常情况，避免代码崩溃

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