Error handling while using native fetch API in JavaScript

šŸ”„ Limited Time Offer
Coding with AI: Learn to build a SaaS MVP in 10 days

Coding with AI: Learn to build a SaaS MVP in 10 days

Master practical AI development to build and launch your startup MVP in weeks instead of months. Learn to leverage AI tools and APIs effectively.

  • šŸŽÆ Build real MVP: AI-powered SaaS from idea to launch
  • šŸ¤– Integrate ChatGPT, Claude, and other AI APIs efficiently
  • šŸ’° Implement AI features users will pay for
  • āš”ļø AI-assisted coding patterns to ship 10x faster
  • šŸš€ Launch your product in 10 days, not 10 months

Fetch API is very powerful. We can easily send Ajax request using browser fetch API. But it has its own disadvantages too.

One major disadvantage is error handling when using fetch.

Example,

fetch(url)
  .then((response) => {
    // Always gets a response, unless there is network error
    // It never throws an error for 4xx or 5xx response šŸ˜Ÿ
  })
  .catch((error) => {
    // Only network error comes here
  })
  • It always gets a response, unless there is a network error
  • All 4xx, 5xx don't get into catch block

Error handling in fetch API using promises

First lets see, without handling errors,

fetch(url)
  .then((response) => {
    return response.json()
  })
  .then((jsonResponse) => {
    // do whatever you want with the JSON response
  })
  • this is bad, because even if the url sends a 404, we send that as response without breaking it.

We can rectify it by throwing error and allow only response which has status code between 200 and 299.

fetch(url)
  .then((response) => {
    if (response.status >= 200 && response.status <= 299) {
      return response.json()
    } else {
      throw Error(response.statusText)
    }
  })
  .then((jsonResponse) => {
    // do whatever you want with the JSON response
  })
  .catch((error) => {
    // Handle the error
    console.log(error)
  })

This will fix the problem, you can even extract out the checking status part as a function which returns a promise or throw error.

function CheckError(response) {
  if (response.status >= 200 && response.status <= 299) {
    return response.json()
  } else {
    throw Error(response.statusText)
  }
}

// Now call the function inside fetch promise resolver
fetch(url)
  .then(CheckError)
  .then((jsonResponse) => {})
  .catch((error) => {})

How to handle fetch errors using async-await syntax

It is same as promises, only the syntax will change. First we will see without error handling,

const response = await fetch(url)
const jsonResponse = await response.json()
console.log(jsonResponse)

example with error handling,

const response = await fetch(url)
if (response.status >= 200 && response.status <= 299) {
  const jsonResponse = await response.json()
  console.log(jsonResponse)
} else {
  // Handle errors
  console.log(response.status, response.statusText)
}

Hope you learnt some tricks in using fetch API, stay tuned for more JavaScript tricks šŸ˜‡