JavaScript Fetch API - One Mistake I ALWAYS MAKE!

Don't make this mistake using JavaScript fetch!

The fetch API only throws an error if you the response is a 500 status. Otherwise, it doesn't throw an error. This means it's your responsibility to ensure the response has come back successfully with a status of 200. It's your responsibility to handle any other type of status like a 404.

**DISCORD**

**STAY IN TOUCH 👋**

**QUESTIONS ABOUT MY SETUP**

[Ghandmann]

Minor correction: Fetch only throws on network error (can't connect, connection interrupted, DNS failed, etc.) but not on status code 500. Every valid http request-response cycle is just that: valid for fetch. The interpretation of the status code is left to the developer.

[DavidWoodMusic]

I work for a banking firm and we have built so many custom tools and wrappers around literally everything that sometimes I forget how these APIs work in their base form.
Appreciate you James.

[MentorAliu]

i like to throw error with status code if(!response.ok) and then in the next if statement check if the response is json, because sometimes you receive templates and you want to handle that as well, if everything else goes right i return the json

[ebrahimmehri]

Excellent! I'm a professional Youtube uploader myself and I'm quite aware how difficult it is to make a single video. Bravo! Keep up the good work.

[billygnosis]

The `Response` interface has a property that allows you to check whether or not the response was successful (200-299). So you can just write: `if (!response.ok) { ... }`

[juanmacias]

That makes sense, we should be checking the status code!

[davorinrusevljan]

I did that mistake quite a few times. There is res.ok property that can be checked. If not true I usually throw an error

[ThanHtutZaw]

Quick Question: How can I show fcm notification in foreground instead of toast or new Notification() without action button support.

[neontuts]

Thanks for sharing James. I thought the catch() method catches all types of errors.

[kovoliver]

I think the proper approach is, when you develop a JSON REST API, you must send the body always in JSON format, including when the status is 4xx or 5xx. So the basic error is in the API implementation, but of course, you have to deal with this in the case of some APIs.

[ondrejhavazik]

Very helpfull video James! I also thought, that 4xx is error which should be catch :-D. Can I ask you, I assume you are using quokka and you have to use 'node-fetch' library for create API requests, this library is installed globally or somewhere in your project? Thanks! :-)

[nopainnogame]

if I check

if (!response.ok) {}

is it not the same?

[Stoney_Eagle]

I'll keep using axios 😂 still gets the job done very well.

[yayuyo]

In this video, the console.log output is displayed right next to the source code.
Is this a vscode extension? It looks very useful!

[Okir]

Hi James, noob question but how do you get directly your console.log in the IDE next to it? : O thanks

[jordan]

Probably should also check if the content type is application/JSON.. we once had an nginx proxied rest API throw from nginx because the upload payload was too large and it returned an html error page which the UI code gladly tried to parse as JSON 😅

[jnch]

I'm not sure to get the point, if in both case(40x and 50x) we get an error in either the fetch or the json. In either case, I would log an error with all the info I could have(url and status) and provide some error status after.

[braveitor]

which extension is that that shows json response within vscode?

[CodeWithHarshu]

How you calling the await method without the async function

[blackpurple]

Should the catch block catch all errors in fetch? Why hasn't that been the case yet if fetch has been here for so long already