React Native中Fetch请求如何同时获取响应状态与JSON数据？

我来帮你排查这个问题——你的代码里有两个关键问题导致拿不到responseText，还有console.log状态值不准的问题，咱们一步步解决：

问题根源 #

1. 没有返回解析后的JSON数据：你在第一个.then里调用了response.json()，但没有把它作为返回值传递给下一个.then，所以第二个.then接收的responseText自然是undefined。
2. setState的异步特性：this.setState()是异步操作，你在调用它之后立刻console.log(this.state.xstatus)，此时状态还没更新，拿到的是旧值。

修正方案1：正确使用链式.then #

我们需要在第一个.then里返回response.json()，同时可以先把响应状态存下来，另外要在setState的回调里打印最新状态：

fetch('http://mysite/check.json')
  .then((response) => {
    // 先保存状态值
    const status = response.status;
    this.setState({ xstatus: status }, () => {
      // 在setState回调里打印，确保拿到最新状态
      console.log("status_return:", this.state.xstatus);
    });
    // 必须返回解析后的Promise，这样下一个then才能拿到数据
    return response.json();
  })
  .then((responseText) => {
    this.setState({ xtest: responseText }, () => {
      console.log("return-------", this.state.xtest);
    });
  })
  .catch((error) => {
    // 别忘了捕获请求或解析错误
    console.error('请求出错:', error);
  });

修正方案2：用async/await写法更清晰 #

如果你觉得链式.then不够直观，async/await能让代码更像同步逻辑，也更容易同时处理状态和数据：

const fetchData = async () => {
  try {
    const response = await fetch('http://mysite/check.json');
    // 获取状态
    const status = response.status;
    // 解析JSON数据
    const responseText = await response.json();
    
    // 更新状态，在回调里打印确保拿到最新值
    this.setState({ xstatus: status, xtest: responseText }, () => {
      console.log("status_return:", this.state.xstatus);
      console.log("return-------", this.state.xtest);
    });
  } catch (error) {
    console.error('请求出错:', error);
  }
};

// 调用函数
fetchData();

额外说明 #

• 一定要加上.catch()或者try/catch来捕获请求失败、网络错误或者JSON解析失败的情况，避免程序崩溃。
• 如果想在同一个步骤里处理状态和数据，也可以直接在第一个.then里解析JSON后一起更新状态：

fetch('http://mysite/check.json')
  .then(async (response) => {
    const status = response.status;
    const data = await response.json();
    this.setState({ xstatus: status, xtest: data }, () => {
      console.log("status:", this.state.xstatus);
      console.log("data:", this.state.xtest);
    });
  })
  .catch((error) => {
    console.error('请求出错:', error);
  });

内容的提问来源于stack exchange，提问作者Shibin Raju Mathew