混用async/await与then()引发的‘Cannot read property 'value' of undefined’问题排查

首先，混用async/await和then()本身不会直接导致Cannot read property 'value' of undefined错误，但这种写法会让代码的错误处理逻辑变得模糊，增加排查难度。

你的错误出现在res.data.value这一行，说明res.data是undefined。你说服务器不会返回undefined，那可能的情况有两种：

• 服务器返回200状态码但响应体为空，此时axios解析后res.data会是undefined
• 全局axios拦截器可能修改了响应数据，导致res.data被意外清空

另外，你的8_8函数写法冗余，async函数里用await之后再链then完全没必要，既增加代码复杂度，也容易让错误处理链条混乱。

修复方案 #

1. 统一async/await写法，加兜底判断与错误捕获 #

把冗余的then去掉，改用try/catch处理请求错误，同时给响应数据加兜底判断：

'8_8': async () => {
  try {
    const res = await axios({
      url: homeTab['8_8'](),
      method: 'get',
    });
    // 用可选链+空值合并运算符兜底，避免读取undefined的属性
    return res.data?.value ?? false;
  } catch (err) {
    console.error('8_8接口请求失败:', err);
    return false;
  }
};

2. 简化handleAPI8_8函数逻辑 #

可以把状态设置逻辑简化，同时增加错误捕获：

const handleAPI8_8 = async () => {
  try {
    const result = await homeTabApiController['8_8']();
    setHasWaitingGathering(Boolean(result));
  } catch (err) {
    console.error('处理8_8接口结果失败:', err);
    setHasWaitingGathering(false);
  }
};

3. 检查全局axios配置 #

确认项目中是否有axios响应拦截器，是否存在拦截器处理响应时出错，导致res.data被修改为undefined的情况。

关键提醒 #

• 永远不要假设后端返回的结构完全符合预期，哪怕后端明确说明，也要加兜底判断，避免前端崩溃
• async/await和then()尽量不要混用，统一写法能让逻辑更清晰，错误处理更可控

内容的提问来源于stack exchange，提问作者김지수