ReactJS中使用Fetch发起API请求时如何处理响应状态

嘿，刚入门React就开始折腾API请求啦，这步迈得很扎实！我看你已经在尝试判断响应状态码了，不过代码好像没写完，我来帮你补全并优化一下Fetch的响应处理逻辑～

首先得提醒你一个Fetch的小坑：只有网络层面的错误（比如断网、域名不存在）才会触发catch，像408超时、404找不到资源这类HTTP错误，Fetch不会自动报错，得我们手动在then里判断处理。

下面是补全并优化后的完整代码，我会逐段解释：

componentDidMount() {
  // 初始化加载状态
  this.setState({ isLoading: true });
  const id = this.props.match.params.id;
  const api = `bla/bla/${id}`;

  console.log("start call api");
  fetch(api)
    .then((response) => {
      // 先判断请求是否成功（response.ok等价于状态码200-299）
      if (response.ok) {
        console.log("SUCCESS");
        return response.json(); // 解析JSON数据，传递给下一个then
      } else {
        // 根据不同状态码做针对性处理
        if (response.status === 408) {
          console.log("请求超时啦");
          throw new Error("请求超时，请稍后重试");
        } else if (response.status === 404) {
          console.log("找不到对应的资源");
          throw new Error("资源不存在");
        } else {
          console.log(`请求失败，状态码：${response.status}`);
          throw new Error(`请求失败，状态码：${response.status}`);
        }
      }
    })
    .then((data) => {
      // 拿到解析后的JSON数据，更新组件状态
      this.setState({
        isLoading: false,
        data: data, // 把接口返回的数据存到state里
        error: null // 清空错误状态
      });
    })
    .catch((error) => {
      // 捕获所有错误（网络错误+手动抛出的HTTP错误）
      console.error("请求出错：", error);
      this.setState({
        isLoading: false,
        error: error.message, // 把错误信息存到state，方便在页面显示
        data: null
      });
    });
}

几个关键要点： #

• 统一错误处理：通过throw new Error()把HTTP错误转化为可被catch捕获的异常，这样所有错误都能在同一个地方处理，代码更整洁。
• 加载状态管理：不管请求成功还是失败，最后都要把isLoading设为false，避免页面一直显示加载中。
• 状态码细分处理：如果业务需要针对特定状态码（比如401未授权、500服务器错误）做特殊操作（比如跳登录页、显示友好提示），可以在else分支里继续添加判断。
• 组件挂载安全：如果你的组件可能在请求完成前被卸载，直接调用this.setState会导致警告。可以加一个_isMounted标志来避免：

  componentDidMount() {
    this._isMounted = true;
    // ... 其他代码
    // 在setState前先判断
    if (this._isMounted) {
      this.setState({ ... });
    }
  }
  componentWillUnmount() {
    this._isMounted = false;
  }
  

这样处理下来，你的API请求状态就会覆盖成功、失败、超时等各种场景，页面状态也能更准确地反馈给用户啦～

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