How to Get the HTTP Status Code from a Fetch Response in JavaScript

When you make an HTTP request using the fetch API, one of the most critical pieces of information you need is the HTTP status code. This code tells you whether your request was successful (e.g., 200 OK), not found (404), or resulted in a server error (500). Accessing this code is essential for proper error handling.

This guide will teach you how to get the status code from a fetch response, explain the crucial difference between network errors and HTTP errors, and show you the recommended best practice for handling responses based on their status.

The Core Concept: The Response Object (status and ok)

When a fetch call successfully completes, it resolves with a Response object. This object contains all the information about the response, but not the body data itself. The two most important properties for checking the status are:

• response.status: A number representing the HTTP status code (e.g., 200, 404, 500).
• response.ok: A boolean convenience property that is true if the status code is in the successful range (200-299), and false otherwise.

Basic Example: Getting the Status Code

The most direct way to get the status code is to access the .status property on the Response object.

The solution uses async/await:

async function makeRequest() {
  try {
    const response = await fetch('https://www.example.com');
    
    console.log('Status Code:', response.status); // e.g., 200
    console.log('Response OK?:', response.ok);    // e.g., true

    // You still need to read the body separately
    const data = await response.json();
    console.log(data);

  } catch (error) {
    console.error('Fetch error:', error);
  }
}

makeRequest();

note

This demonstrates how to access the status code, but it doesn't yet handle HTTP errors correctly.

The Critical Distinction: fetch and HTTP Error Statuses

This is the most common point of confusion for developers new to fetch. A fetch() promise will only reject if there is a network error (e.g., the server is unreachable, or a CORS error occurs).

A fetch() promise will NOT reject for HTTP error statuses like 404 Not Found or 500 Internal Server Error. For fetch, a 404 is still a "successful" response in the sense that the server was reached and it responded.

This design choice gives you, the developer, the responsibility and control to handle these HTTP statuses in your own code.

The Best Practice: Checking response.ok

Because fetch doesn't reject on HTTP errors, the recommended best practice is to always check the response.ok property. If it's false, you should throw an error yourself to trigger your catch block.

This pattern ensures that both network errors and HTTP errors are handled in the same place.

async function makeRequest() {
  try {
    const response = await fetch('https://example.com/404'); // A URL that returns a 404

    // 1. Check if the response was successful
    if (!response.ok) {
      // 2. If not, throw an error with the status
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // This part will not be reached if the response is not ok
    const data = await response.json();
    console.log(data);

  } catch (error) {
    // 3. The catch block now handles both network and HTTP errors
    console.error('Request failed:', error);
  }
}

makeRequest();
// Output: Request failed: Error: HTTP error! Status: 404

The .then() Equivalent

The same logic applies if you are using promise chains with .then() and .catch().

function makeRequest() {
  fetch('https://example.com/404')
    .then(response => {
      // The check happens in the first .then() block
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Request failed:', error);
    });
}

makeRequest();

Conclusion

Getting the status code from a fetch response is simple, but handling it correctly is crucial for robust applications.

• Access the numerical status code directly via the response.status property.
• Remember that fetch() does not reject its promise on HTTP error statuses (like 4xx or 5xx).
• The recommended best practice is to always check the boolean response.ok property and manually throw an error if it is false to ensure consistent error handling in your catch block.