Asynchronous JavaScript Tutorial #3 - Status Codes

Key Takeaways

so right now we're checking this thing over here request dot ready state is equal to four and at that point the request is complete and then we're logging the response text to the console and that's fine but this check in itself to say okay well the request is complete that's not enough because if there was some kind of error with the request for example if i create some kind of end point which is not valid it still tries to make this request and it still goes through the motions of going through each phase or state and it will reach state four but the difference is we're not going to get any kind of data back because this is not correct there will be some kind of error along the line and although it will reach stage four to say yet the request is now complete it will come back with some kind of error code to say there was a problem along the line somewhere and obviously we won't have access to the response so let me just demo this i'm gonna just log out the request object in itself here as well as the response text and i've added this extra s to the url the end point so obviously this doesn't exist and we should see some kind of error but i'm going to log out the request anyway and try to log out the response text so let me save this and come over here and now we can see first of all we get this 404 error and we get this thing right here this is the request object notice we don't see any response text when we're logging this we don't see over here because we're not getting that data anymore because there's an error now if we open this up and we come down here we can see the status right here is 404 and the response text is empty so we're still reaching ready state 4 and we're still firing this code that's not a problem we're still getting there it's just that there's been an error along the way and now we're getting this bad status 404 and also no response text so what we need to do to overcome this is as well as checking the ready state also check the status when the request comes back so if i correct this again to the correct endpoint and save it notice now we get the data and also up here we can see this object if we expand that we get a status of 200. we're at readystate4 we get the response text and we have a status of 200. now a status of 200 means that everything was okay with the request and it's come back with the data essentially now the 404 request that we just saw means it cannot find the resource that we're trying to send it to and it can't find it because it didn't exist when we added this s on that resource this endpoint it didn't exist so that's why we get a 404 error sometimes when you go to a web address up here that doesn't exist you'll probably see some kind of 404 error in your browser that's the same kind of error now there's loads of different types of status codes and you can get them all from a lot of different websites this one the mozilla mdn guide lists every single one as well so typically we get codes in the ranges of the 100s 200s 300 400s and 500s and in each range it means something a bit different so all of the status codes in the 100 range they are to do with information responses anything to do with success responses is in the 200 range we can see 200 right here is okay and then the 300 range is any kind of redirection messages the 400 range is client error responses so this is when there's an error in the browser such as when we formatted something incorrectly in the code or if we use a wrong endpoint etc this is the one we saw 404 not found and then 500 is when there's a server error over here so it's not our fault we've made the correct type of request but there's some kind of error on the server which prevents us from getting the data so they're the different kinds of response codes what we want to do is to make sure that we have this response status so as well as checking for ready state 4 over here we can also check for the status right here to be 200 so we've seen how to do logical and double ampersand and we say request dot status is equal to 200. now this is only gonna fire when we get an okay response and ready stay equal to four so let me try this again i'm gonna save it and notice now we don't log out this thing right here the request object because this now is not firing because the status is not 200 we still get this error up here to say we've got a 404 error but we're not trying to do something now over here we're only doing this when we have a correct endpoint so if we save it now we can see all of this stuff here and the object so what we could do is attack on an else clause and in fact we'll say else if and then in this if statement we're still going to check this thing over here like so now if this is the case if the ready state is still equal to 4 but obviously at this point the status is not 200 so something's maybe not okay then we can fire this code block over here so the request is finished but there's been some kind of problem along the way and we probably don't have any kind of response text so what we could do here is say console.log could not fetch the data okay so if we save that now and try something like adding an s on save it and we can see now we get this little error message in the console could not fetch the data so now we have our http request set up the next step is to write a callback function which is going to execute when this task is complete and we'll tie this back into our understanding of asynchronous code