Asynchronous JavaScript Tutorial #2 - HTTP Requests

Key Takeaways

okay then so now we know how asynchronous code generally works and how we can use callback functions which can run code after an asynchronous task is complete let's now turn our attention to http requests which are the things that are ultimately going to be the actions which take some time to complete in your code so first of all what is an http request and why would you want to make one well sometimes we want to show stuff on our website which is stored in some kind of database or in another server somewhere such as blog posts or comments or maybe a list of songs or even user data for a profile page now all of that data could be stored on another server somewhere or in your own database so we'd make what's known as an http request to reach out to that external server on that database to get that data and then do something with it now when we make those requests we can make them to what's known as an api endpoint and these are just like urls that a particular api or server exposes to us so that we can use them to get data from them so for example imagine we had a song library api like spotify or soundcloud it might have an endpoint which looks something like this so making a request to this endpoint would return us a list of moby songs so from our code which runs in the browser we would make a request to a server endpoint now that server would look at this request and say okay you want this data so i'll send it back to you as a response and then we get that data in our code and we can do something with it like render it to the browser if we want to now there's many different apis that we can use to get data twitter youtube instagram spotify and loads more and each api is going to have its own set of endpoints that we make requests to for data you could even make your own api using a server-side language such as python ruby or even javascript if you're using node.js but anyway once we make a request to an endpoint from the browser we typically get back a selection of data in a format called json json is a format which looks very much like javascript objects and then we can do something with that data so the api that we're going to be using to practice with in this chapter is the json placeholder api and i'll leave this link attached to the lecture so this is a nice completely free service that allows us to play around with api endpoints and to get back some json data now we can see an example of this in action if we scroll down right here this is an end point and if i click try it then this website is going to make a request to this endpoint and show me the data down here so i'll click that and we can see this data right here so this looks very much like json data this is the kind of data we would get back from a server now likewise i could take this endpoint and i could just place it up here and paste it and press enter and that is going to get me the same thing we're still making a request it's just that this time we're directly making the request inside the browser to go and get that data now if i open up the dev tools and then i go to the network tab over here we can see if i refresh this we're going to see this thing right here this is the network request and we can see some different information about the network request right here we can see the request method is a get method and when we want to get data from somewhere typically that's what we do we make a get request we can see the request url right here which is what we added to the browser at the top and if we go to the response tab over here we can see the data that we get back and this is json data so our task will be to interact with these api endpoints like this and make http requests to them from our javascript code so that we can receive a response and get some data back like this and then do something with it like output in a dynamic html template in the browser so then we know what an http request is now and why we'd use it to get some external data via some kind of api endpoint so now let's see how to actually make a request from our javascript code so the first thing we need to do is make a request object so i'll create a constant and i'm going to call this request and the way we create a request object is by saying new and then xml http request so this creates us a request object now this xml part represents an older data format we used to work with much before jason arrived on the scene but this request object can work with any kind of data now xml json plain text etc so now we have this request object and this is the thing that is going to be used to actually send a request from the browser this thing is built into the javascript language so now we have this request object we can actually use it to send a request to get some data so how do we do that first of all we take the request variable we just created and now this comes loaded with different properties and methods we can use the first method we need to use is the open method now this open method takes two arguments the first argument is a string and it's the type of request we want to make now remember when we get some data we make a get request now there are other types of requests that we can make like post to send data or put to update etc there's loads of different types but we want to get some data and for that we make a get request so that is the first argument right there the type of request we're making now the second argument is where we want to make the request to what is the end point we want to get data from so if we go to the json placeholder and scroll down a little bit the endpoint we want is right here this is the data we want now copy all this except for the one the one at the end gets us a single to do but we want all of the to do's and this url right here will do that without the one it will get us a list of to do's so copy that and head back to the code and we need this inside a string again so paste that inside there now so now we're telling our request what the type of request is and where to get that data from where to send the request to but at the minute the request isn't actually being made this is just kind of setting up the request so to actually send the request we need to say request dot send and that sends the request so if i save this now and head to the browser i'm going to go to the network panel over here and then i'm going to just refresh and we can see now if we go over here we can see this request made here so if we click on that request we can see it's a request method of get this is the end point and the response over here is all of this data but at the minute we don't know in our code when this is complete we don't know how to access that data so how do we do all that well in our code we can track the progress of a request using an event listener and a specific event called ready state change so we attach this to the request object itself so we can say request dot add event listener and the event is called ready state change all one word all lowercase so that's the event and this fires every time there's a state change in the request now a state change just means that the request is going through these different phases of the request and there's four in total so what i'm going to do right here is just log those out to the console first of all i'm going to say console.log and then the request object every time there's a state change and then i'm going to log out request dots ready states and that gets us the state that the current request is in so if i save this what's going to happen is we're going to set up the request then we're going to send it and every time there's some kind of ready state change then it's going to log these to the console so let me save that and come over here and come to the console and you can see there's four in total like i said so each time around we get the request object which has all of these different things on it and up here we can see we also have the states one two three and four but what do these actually mean well to find out we're gonna head on over to the mdn guide the mozilla website and we can see down here these different ready states so we have zero which means it's not yet been sent and open has not been called remember we use open right here then we get ready state one when we've actually called open so after this point right here we're gonna get ready state one then after we use the send method we're gonna get ready state two which is this point then ready state three is when we're downloading and we've got some kind of response text and then four is when the operation is fully complete and we've got access now to the response so this right here this number four this is the most crucial step because at this point this is when we want to take that data and do something with it we can receive it and do something so if we head back to these different things right here if we open up this object and come down here we can see this response text and this response text contains the actual data that we receive so over here what i'm going to do is listen inside this event listener for the ready state changes and if the ready state is equal to four that's the point when we can do something with the response text so what i'm gonna do is comment this thing out first of all and then i'm gonna do a little if check and inside here i'll say if request dot ready state is triple equals to four then we're going to do something this is when we can do something with the response the data not in zero one two or three we can't do it at those stages because it's not ready yet but we can do it at this stage so we only want to do something at stage four and that's why we're doing this if check because then whatever we do with it we can do that here so for now all i'm going to do is console and say request dot response text that's the property which contains the response data so if i save this now then come to the browser we're going to see all of this data returned to us so we have all that now that's really nice and it looks like a gigantic array of javascript objects but this is actually json data it's all really a giant string called jason and we'll look at how we can deal with this data later on but for now just know this is the data that we're getting back so now we're sending the request and we're reacting when it's complete and we get a response and we can see that data in the console so we're two thirds of the way there but this isn't complete yet to complete it fully i want to talk about response statuses and we'll talk about that in the next video