Welcome back.
In this video, let's see how we can make a HTTP request using the fetch API.
And this is the final project that we are going to build.
You can see that when I click on fetch, I'm able to fetch list of posts from somewhere else into my
application.
So a way of getting the information from different server is what we call the HTTP request and we use
fetch to get it done.
So we are going to use this server called JSON Placeholder.
If you go to JSON placeholder dot type icon, you're going to greet you with this website.
So after I show you how to use this API at your free time, you can come to this website to make use
of any API from this website.
So let's see the step.
As always, I have already provided the template for you because again, this section is not about HTML
or CSS or how to select an element.
So we have selected the element and a CSS is also ready.
So if you open it, you're going to have something like this with some static text here.
So now let's explore more how to use the fetch API.
So before we get into that, we need what is called the API endpoint.
So here, let's have a comment by saying making.
Real quests.
So let's look at it.
Step.
Step number one is get.
So the end point is this one.
If you go to the placeholder and you scroll down, they have exposed some of the resources for us and
we have a sample code to get it done.
But if you scroll down, these are the resources and we can make a request to this slash post to get
hundred posts or if you want to fetch comment when a base slash comment.
So if you click on that, you're going to see the you are for that and you are going to copy this u
r and remember all API retains what is called JSON format and if you get back to back end, we are going
to develop our own API to have something like this and a back end.
We will build what is called employee database or block API and expand this API for the meantime, let's
see how we are going to consume this one.
So now let's copy this one.
And now back to our application.
Let's declare a variable and call this one as you are.
Is equal to that.
Now the first step is that we go back to u r l.
Now, if you scroll down here, we have the root.
The root simply means that the u are all and we have all the HTTP method.
Like I said, if you get back to back in development, all this would be pretty easy for you to understand.
For the meantime, when using the fetch API, you need to parse in the HTTP method.
When I say HTTP method, it simply means that what action do you want to take on the server?
And for this, the placeholder is the server that we want to talk to.
So for this server we can create a new post into H or we can get if I trying to get something from a
server, we are going to use get requests if we want to create a new to do or new post into the server.
We are going to use what is called post requests.
For the meantime, we are going to state to get requests if we get back to back and we are going to
make use of all these HTTP methods.
So now we know we are going to use this to now we have all the ingredients.
So let's get started.
So to get started, we are going to make use of fetch because it's a built in API.
We have access to it globally and for this we call it as a function.
And remember making it HTTP request simply means that we are going to deal with promises meaning asynchronous
way, meaning that we don't know when the response will be back.
It can happen that the server of guessing placeholder can be down or we have low uptime.
So in that way we need to handle that.
So to be familiar with making HTTP requests, you need to understand what is called asynchronous programming.
And for this one too, we have covered them in detail in the previous section.
So let's see.
So the first item we pass to this one is going to be the you are error.
Now, here we go.
We need to handle the promise well.
So these are going to be we can use the normal promise we or callback or async await.
So here we add what is called dot, then meaning that dot.
Then what is the actual data that is coming back for the server and you call it as a function?
And lastly, we bring in cache.
So inside this card is where we are going to cut any error that might occur when making this request.
And this one takes in one element and that is a callback as that.
And here I'll pass in error function.
Likewise, this one also has a function and for this one we have access to the error.
So let's go ahead and then consider plug the error here.
Perfect.
So inside the dot, then we have access to the data and here I'll call it as response.
And here I have access to it as a response.
Now let's consider that.
So now if I save it and I check the console of this one, now let's see.
And you can see that I got something called response on line number 11 on my code, which is this.
That is why I say that we get back the response inside the door then.
So now let's crack open it and let's see.
And we see something strange.
Here we have the body, the actual data.
It is on the body, but we have this ellipsis dot dot simply means that it is readable stream, meaning
that the actual data is not ready yet.
So to be able to convert the actual data, we need to add what is called JSON.
So here we have a method on the response that is the to Jason.
And remember this one too is a performance.
So we need to handle the promise also.
So inside here we have access to the actual post here or the actual data.
So our pass into the callback function and now if I console that, log the data, let's have a look.
Now save it and now let's check.
And you can see that I go back all the inside my current.
So here so now I can take this post and display it to the DOM as I did here.
You see, I have 100 posts, the one we see in the console.
Here is what we see on the page.
How awesome it is.
So what has left is that we are going to create a function.
Jane, to take this pose and then render into the dog.
So for this I am going to use async await.
So now we are going to create a function to render this one.
So here we go.
I'm going to be const fetch.
Post is equal to a function and as that and because I'm going to use async await our mark my function
as an async and our brand might try and catch.
So inside my try, that's where I'm going to make the request to this endpoint.
So here we go.
Const response is equal to our weights and the fetch API.
Then I'll pass in the you are perfect.
So inside the response, I need to await that and get back the extra response by using what is called
JSON.
So comes the actual data here is equal to await.
And then the response dot Jason.
Well, if we are using a third party HTTP client like Axios for this second step, we don't do it because
Axios passes the data for us automatically without doing this one by converting the response to JSON
before we get back the actual data.
So now I can go ahead and then loop through this one and then inject it into the DOM.
So now let's have a look.
So here, if you consume that log the data, you're going to have the same thing as we saw.
So inside here we can console.log the error in case we have one.
So now let's call the function as fetch post.
So now let's see and indeed we have of the post.
But what I want is that I want to add an event listener on the button.
When I click on this one, then I want to call this function to fetch.
So now let's select the event listener.
That is a button.
So I forgot to select that.
And that is the let's see the button, which is this one.
So let's go ahead and then select that.
So inside the JavaScript here, we can copy this one and let's paste down here and change this one to
be C and because it's an ID, I'll use hash tag and that is it.
So down here b t n dot event listener and the event is going to be a click event.
Then I'll call the fetch post.
Now let's move this one and let's check the console when I click on this one and you can see that I
go back the response Great.
So the last step is that there is an error here.
Sorry, the last step is that I'm going to look through the post and then inject into the DOM as we
did for the task manager.
Application is going to be the same step here.
Remember, we have selected the container, meaning that we are going to inject and this is a container,
right?
If I collapse it, you can see I have a card that grab the two items.
I have one here and one here.
So let me collapse all the card and move one here.
So I will select this one and then copy it.
Or we can move it or we can maintain it and then comment it for future references.
So now if I save this one, you can see that we have empty post here, but instead we are going to use
JavaScript to add the one.
So here we go.
So here we are going to display all the posts and display to the DOM.
So here we go.
So let's add comment and say that display to Dom but English, right?
So okay, so let's look through the data using map and as we did and here we have access to the individual
post here as that and we bring in return and then back take here.
Then I can add my HTML like that.
So what comes back is the actual HTML.
So I'll call this one as result equal to that.
So next is I need to add the dynamic value here.
So the first one, I'm going to be the dollar sign.
Charybdis is going to be post dot title and then for the body which is the p here remove that dollar
sign.
Charybdis is going to be post dot body.
That's what we saw in the console is post and that is it.
Lastly is that I need to add to the DOM as we did.
So I will take the container and then the inner html is equal to result.
Then I will join with the empty string.
And that is it.
So let's see if I click on this one.
Let's wait.
And we have back the posts from the external server and this is how we make HTTP request guys.
So you can improve this application to display some loading in case it is loading.
All right.
So that's pretty much of how to make an HTTP request.
The final project is about getting my location using the geo location API.