You might be using fetch with async/await wrong...

async await with Fetch and JavaScript is amazing but you might be using it wrong first we're not handling errors at all here so let's fix that and maybe we'll handle the error somehow and re-throw it so our code doesn't continue so you might think okay because we got the error we can start using the user except fetch doesn't throw errors for non-200 HTTP statuses so user is just the raw response that could be a 401 a 400 a 404 now we can handle that with checking res dot ok so if not run okay let's throw an error and that's okay but there could be many different errors could be unauthorized it could be missing it could just be an internal server error or even a bad request when we handle this error we don't get any of that information what was the status what was the body what was the message so our error logs will just say bad stuff happened I'd rather when handling the error know what the cause of the error was that's where a handy new feature in JavaScript can help us we can supply the cause and add any structured data here that we want so maybe we will just pass the response now when we handle the error for instance we can create a switch based off of the error cause response status and handle each various status code in any special way we want either unique to this request or maybe we have a generic candle function that will do that for us like alerting the user if the request is unauthorized or for a 400 say oh this is probably our fault please report the bug to us now we can feel confident that when we're using the user object actually have a user object

Channel: Steve (Builder.io)

Views: 6,048

Keywords:

Id: cJQQizjl7eo

Length: 1min 30sec (90 seconds)

Published: Sat Jan 07 2023