Fetch not throwing error on 4XX in JavaScript

Fetch in JavaScript helps you to make the network call and fetch the data from the server.

It is easy to use and abstracts the traditional XMLHttpRequest object and helps to do better to Ajax calls.

This is how we make requests using fetch,

async function networkCall(){
  try{
    const response = await fetch('https://learnersbucket.com/dummy');
    return response.json();
  }catch(e){
    console.error(e);
  }
}

The weird thing about fetch does not throw an error when the HTTP network returns status 4XX or 5XX. To fix this, we can use a workaround and manually throw an error when the network status is not OK or 200.

async function networkCall(){
  try{
    const response = await fetch('https://learnersbucket.com/dummy');
    if(!response.ok){
       // Throw an error if not 200
       throw new Error('Did not received 200 in response');
    }
    return response.json();
  }catch(e){
    console.error(e);
  }
}