React调用Flask接口无法访问响应？如何保存Flask返回的响应对象

你的代码存在错误处理缺失和Promise链不完整的问题，导致无法捕获响应异常或解析失败的情况，以下是修复方案及排查要点：

修复后的代码 #

const fetchDataFromBackend = () => {
  const filters = { age, class, username };
  fetch('/query', { 
    method: 'POST', 
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(filters)
  })
  .then(response => {
    // 捕获非2xx状态码的响应
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    console.dir(response); // 用dir查看完整响应结构
    return response.json();
  })
  .then(data => {
    console.log('后端返回数据：', data);
    setTableData(data);
  })
  .catch(error => {
    console.error('请求异常：', error);
  });
}

关键修改说明 #

• 补充错误抛出逻辑：当响应状态码不是2xx时（比如400、500），主动抛出错误，避免Promise链静默中断。
• 添加异常捕获catch块：捕获网络失败、JSON解析错误等所有异常，在控制台打印具体错误信息，快速定位问题。
• 用console.dir查看响应：直接console.log(response)无法展开显示流对象的完整属性，console.dir能展示Response的全部细节。
• 在数据解析后打印：确认解析后的JSON数据是否符合预期，再更新组件状态。

额外排查步骤 #

1. 检查Chrome控制台的「Console」标签，看catch块是否打印了错误信息，比如JSON格式非法、后端返回错误状态码。
2. 在fetch调用前添加console.log('请求参数：', filters)，确认age、class、username变量是否有正确值。
3. 验证Flask返回的JSON格式是否合法（比如没有语法错误），非法JSON会导致response.json()抛出解析失败错误。

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