Transcript

          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 on

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 or 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 Jason.

And Jason 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 endpoint 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 it in a dynamic HTML template in the browser and we're going to look at how we

make these Http requests from the code in the next lecture.