JavaScript Fetch API - One Mistake I ALWAYS MAKE!

with the JavaScript fetch API most people incorrectly assume that you can just start parsing Json from the response but you can't do that here's one gotcha that you need to look out for all right so this is typically the way we write fetch request now this is using node fetch which is a polyfill but matches the JavaScript fetch API in the browser so in this case what we do is we call fetch we pass it a URL I like async await so we await that we get the response and immediately we assume hey let's just take this response and convert it to Json because that's the majority of things that we're doing is receiving Json data so then we get that we assign it to a variable which in this case should be renamed to Bulbasaur I don't know if anyone else is a Pokemon fan that was a huge part of my life growing up which is a ton of fun whatever but so then we log this data out and everything works and we also were handling any errors now the errors is interesting I would expect that if the status of the request the fetch request is not 200 that it would trigger this error so let's say it's a 404 for example not found I would expect this to be triggered down here but as we'll see in a second that isn't the case so let's say we type in the name of a Pokemon that doesn't exist but let's call this developer uh sore risk all right that's a Pokemon that doesn't exist right so what actually happens in here well we get an error and it's not the air that I would have expected which is handled inside of the catch It's actually an error in handling this response and trying to convert it to Json so again I would expect if this returns a 404 for it to trigger an error but it's not actually considered an error unless it's a status of 500 so all of the other ones return in here what seemed like successfully but then give you access to the actual status that's returned for you to investigate did this actually come back in the way that we expect so would you want to check and we can log this in here we can log out the res dot status so we make the request and we see here we get a status of 404 well that's our cue that we need to do something and not try to parse the response as Json so we could check something like if the res dot status does not equal 200 we might want to do something else so we could just say return so we skip that extra bit of logic below and we're not actually inside of a function so actually a return doesn't make sense so let's just do the opposite of we're only going to try to get Bulbasaur or in this case developer resource let's use that name just because it's fun so we're only trying to get the Json data if the status is a 200. now in this case you would probably want to log out the failed request or something but the primary thing is the mistake that people make including myself all the time is assuming that we don't have to do any other checks in here other than just converting this response to Json but you need to double check that the response that comes back is an appropriate response something like 200 and if it's something else you need to handle those accordingly as well now lastly just to show you how you trigger the air down here let's log out something that will be a little bit readable to us so this should be pretty obvious that won't trigger right now but if we call a domain that doesn't exist like this I don't think that's a real domain with that route we now see that our air is logging out so it is handling that but for statuses like 400 404 Etc you need to be checking those and make sure you're getting a 200 before you start to parse your data into Json so hopefully this is helpful this has been a nitpick of mine for a long time where I don't think it's immediately obvious and I think it's really easy to get tripped up on this if you're not really paying attention now really quickly a shout out for me I just released a course on Astro which is one of my favorite Frameworks it's super powerful front end and back end are building full stack applications but I just released a full course where we build a super powered markdown blog that uses Tailwind CSS typescript Zeta database cloudinary for automatically generating images and we add authentication a basic auth strategy as well as a bunch of other stuff inside of here including deploying to netlify and versa so if you're interested in learning everything you'd want to know about one of the coolest most exciting Frameworks in JavaScript which is Astro go and check out the course at astrocourse.dev in the meantime I hope you enjoy with the video I hope I'll catch you back for another video in the future thanks as always for checking it out and I'll catch you later

Channel: James Q Quick

Views: 22,670

Keywords: javascript fetch api, javascript fetch mistake, javascript error handling, web development, javascript, try catch, async await, fetch api json, fetch json with javascript, js fetch, asynchronous javascript

Id: AGWwa25ZlRY

Length: 4min 46sec (286 seconds)

Published: Thu Oct 05 2023