Stop Fetch-ing in error
Tags: webdev, javascript, fetch, beginners
Published: 2023-02-23 09:02:14






## Contents

1.  [Intro](#intro)
2.  [The Problem](#problem)
3.  [The Solution](#solution)
4.  [Summary](#summary)

## Intro <a name="intro"></a>

Before we jump in.
If you are thinking I use [`axios`](https://www.npmjs.com/package/axios) or [`requestjs`](https://www.npmjs.com/package/request) etc so this doesn't apply to me.
Put the `npm` package down and step away from the install!

[Fetch is now supported](https://developer.mozilla.org/en-US/docs/Web/API/fetch#browser_compatibility) in all major browsers and even in [NodeJS](https://nodejs.org/en/blog/announcements/v18-release-announce/#fetch-experimental) now!

Which is awesome! We now have a single way of making requests across the browser and backend!
So much time and npm downloads saved!

Also if you need to support really old browsers, there is an official [polyfill](https://github.com/github/fetch) you can load on your website to provide you with the same fetch experience.

Now let’s jump in!

## The Problem <a name="problem"></a>

Fetch is awesome a really great way of making requests from your code.

However I've seen in many tutorials and code the following code, which **will** cause issues:

```js
    fetch('http://example.com/movies.json')
    .then((response) => response.json())
    .then((data) => console.log(data));
```

*Even in the [Mozilla docs](https://developer.mozilla.org/en-US/docs/web/api/fetch_api/using_fetch)*

Why is this a problem?

If the endpoint you are fetching, returns a not okay status code then fetch will not throw an error.
You have to check yourself if the status code if okay or not *before* trying to get the response body with `response.json()`.
Otherwise you could end up with some generic error and no context around what caused it.

But, you might be saying to yourself well my endpoint always returns JSON, even in an error scenario.
This may be the case, but if anything out of your control errors for example an API Gateway then you are very likely to get a non JSON response and again cause yourself a headache debugging.

## The Solution <a name="solution"></a>

The solution to this is really straightforward, simply check if the response if ok, before attempting to get the response body.

You can see in this example, I'm checking `response.ok` [which indicates if your response status was in the 2XX range](https://developer.mozilla.org/en-US/docs/Web/API/Response/ok).

But you can also check for specific statuses as well. Here I'm checking for a 204 - No Content status code as I won't have any JSON to return in this instance.

Otherwise I reject the promise, returning the full response in the error.

I've also wrapped it in a try catch for safety in order to catch any CORS, timeout errors etc.

```js
    const request = new Request('http://example.com/movies.json');
    try {
      const response = await fetch(request);
      if (response.ok && response.status !== 204) {
        return response.json();
      }
      if (response.ok && response.status === 204) {
        return Promise.resolve();
      }
      return Promise.reject(response);
    } catch (e) {
      return Promise.reject(e);
    }
```

## Summary <a name="summary"></a>

In summary, fetch is awesome!

However there is a bit more to it in order to handle errors and bad responses from any endpoint you might be hitting, so double check your fetch code to make sure you are handling errors gracefully. It will definitely help when it comes to debugging any problems.

Happy Building!