Complete Guide to Handling HTTP Response Status with Fetch API in ReactJS

Core Mechanisms of Fetch API Response Handling

In ReactJS applications, properly handling HTTP response status when using the Fetch API for network requests is crucial for ensuring application robustness. Many developers, especially beginners, often misunderstand the error handling mechanisms of the Fetch API, leading to abnormal behavior when non-200 status codes are encountered.

Analysis of Common Error Patterns

Consider the following typical erroneous code example:

fetch(api)
  .then((response) => {
    if(response.status === 200){
      return response.json();
    }else if(response.status === 408){
      this.setState({ requestFailed: true });
    }
  })
  .then((data) => {
    this.setState({ isLoading: false });
  })
  .catch((error) => {
    this.setState({ requestFailed: true });
  });

This code has several critical issues: First, it only checks specific status codes (200 and 408), ignoring other possible error states. Second, when the response status is 408, no value is returned, causing the Promise chain to break, and subsequent .then() blocks do not execute, so the isLoading state is never set to false. This is the root cause of the asker's problem where "the loading state persists."

Correct Methods for Response Status Checking

According to authoritative guidance from MDN documentation, the Fetch API Promise is only rejected for network errors (e.g., connection failures) or CORS misconfigurations. HTTP status codes like 404 or 408 do not constitute network errors and thus do not trigger the .catch() block. The correct approach is to check the response.ok property, which returns true for status codes in the 200-299 range.

Here is the corrected code example:

fetch(api)
  .then((response) => {
    if(response.ok){
      return response.json();
    }
    throw new Error(`HTTP error! status: ${response.status}`);
  })
  .then((data) => {
    this.setState({ 
      isLoading: false, 
      downlines: data.response 
    });
  })
  .catch((error) => {
    console.error('Fetch error:', error);
    this.setState({ 
      isLoading: false, 
      requestFailed: true 
    });
  });

This method ensures: 1) All non-200-299 status codes throw an error, entering the .catch() block; 2) isLoading is correctly set to false regardless of request success or failure; 3) Error messages are properly logged for debugging.

Promise Chains and Asynchronous State Management

Understanding the asynchronous nature of the Fetch API is essential. In the original code, console.log("end call api") executes before the Promise resolves, which may lead developers to misunderstand the code execution order. The correct practice is to place all state updates dependent on the request result within the Promise chain.

Furthermore, in combination with React's lifecycle methods, it is recommended to initiate requests in componentDidMount and consider canceling unfinished requests in componentWillUnmount to avoid memory leaks.

Additional Optimization Suggestions

Referencing other answers, error handling can be further optimized: use !response.ok as a condition for brevity. Also, ensure all possible errors, including network errors and thrown HTTP errors, are handled in the .catch() block.

In summary, the key to correctly handling Fetch API response status lies in: using response.ok for comprehensive success checks, ensuring proper Promise chain flow by throwing errors, and managing loading states appropriately across all paths. This not only solves the immediate problem but also enhances application reliability and user experience.