Today's video is going to be a quick video where I show you how to use the fetch a p I built into the browser in order to make a synchronous request to different network Resource is by using get post put whatever it is that you want to use.

So let's get started now.

Welcome back to Webb.

Have simplified my name's Kyle and my job is to simplify the web for you so you can start building your dream project sooner.

So that sounds interesting to you.

Make sure you subscribe to the channel for more videos just like this one.

And to get started, I have just a simple job Script page open on the right hand side, which is open the consul on the right hand side.

So everything that we put inside of this left side, as you can see, is going to be acted upon in the right hand side.

So everybody over here weekends to the result of over on the right and to get started.

As I mentioned, we're gonna be using the fetch a p I we're just going to be hitting this fake a p I, which is going to give us back some fake data.

So this is going to, for example, give us all the users inside of this A p I or we could just get a single user, for example.

And the way the fetch FBI works is you passive the euro as the first property, and then it has a second property, which is optional.

And this is all of the different options that you want to pass to it.

Such as If you want to do a post request instead of a get request, you're gonna need to do use these options, but to get started, we're not gonna use any options with fetch.

And we're just gonna re log this out to see exactly what we're getting returned.

So we'll say, Consul, that log of fetch.

And if we say that you see that we're getting a promise on the side here.

So we know that fetch is promised based, which means that we can use a sink a weight where we can use dot then and dot catch with it.

And if you're not familiar with promises or a single weight, I have links in the description and in the cards that you can check out those videos that I've made on both of those topics.

So to get started leading to do is we need to say dot Finn and fetch is going to return to us a response.

So we have a response object, and we're gonna log out that response object to see exactly what this looks like.

And if we save that, you see, we get a response that says that the status was 200 says status Texas empty okay is true.

So we know that this was successful and it has a body which is going to be all of our data.

But this body of data is actually not accessible directly from the response object.

We need to call a method on it to convert this response to Jason since we're actually using Jason Data.

So what we need to do is say rez thought Jason, and this is going to return another promise.

So then we need to use dot Then again, and this is going to be our actual data.

We can say consul dot log of that data.

So, as you can see, we have all the different data on the right hand side here and has page numbers as well as all of the different users that we're getting from the A P I.

And that's working great.

Everything's looking good.

But what happens if we want to get a single user?

And, for example, we're gonna get User 23 which does not exist, So we're gonna get a 404 status back, and when we say this, you're going to see that get request actually happened.

But we still ran our successful dot then code even know we had a four or four being returned.

You would think that sense of 404 is an error, that it would end up in a catch statement like this where we have an error and then we would just want a log, some text that says air, for example.

You can see we're not getting any air text, and that's because the way fetch works, even though we're getting a 404 response, which is a failure of a response, Fetch always succeeds, no matter what, unless there's some form of network error where the actual browser has a hard time connecting to the Internet, the only time you're gonna get a failure is if you have a failure with fetch itself and not with the A P I you're calling.

So you need to do is inside of your response.

You want to check to make sure the responses okay, So inside of here, we can do is we can say if rez dot Okay, then we know we had a successful response.

We're just gonna, for example, consulate log success else.

If it's not successful, we're just going to say something else.

Where is gonna say not successful?

There we go.

Now, if we say that, you can see we get not successful because this was a 44 response.

But if we go back to our other example, which worked, you can see we now we're getting this success response being returned because it is an okay response.

Essentially, it's in the 200 level status codes between 202 199.

Now, that's good.

No, but with fetch many times, you want to do more than just get data from the server.

You actually wanna postdated toe a server, update data, delete data, and in order to do that you're going to need to use the options section of the fetch method.

And the first thing we need to do is pass in a method this could be either get post put delete.

It's just one of the http methods.

Sorry.

Case we're gonna use Post.

We're gonna create a new user at this ap I by just doing a post request.

And then what we need to do is we need to actually pass the data for that user, and that's going to go inside of the body.

We're gonna pass that as in Jason.

So what's just come in here and give the user and name and we can just say user one is the name and we can tidy up this code here.

We can return just resident Jason, make sure we returned that and where we go now, if we say this, you're gonna immediately notice it's not going to work.

We got our data back and it looks like it works.

But as you can see, there's no name for a user.

It didn't actually save our user properly because this body didn't get sent up correctly.

The way that fetch works is you actually descended, Jason.

So you need to do Jason got string?

If I and actually string if I the object that you're passing it just like this.

Now, if we say bed, you're again still gonna notice the name is not here, so it's still not working.

And that's because you also need to set the headers.

Essentially, you need to tell Fetch that you're going to be passing Jason.

So we're gonna pass it an object.

And inside this object, we can set the content type.

We want to set that to application slash Jason.

And now, if we save it, you can see we're correctly getting a user with that name.

So we're actually creating a real user with the name from our body.

And the main thing you need to remember when doing anything with Jason data that you're posting to the server is you need to make sure you set the header to the correct content type of application, Jason and you also need to string if I the body so you can't just send a Java script object.

You have to convert it to a Jason String.

And that's something that trips up a lot of people when their first messy with fetch.

And that's really all there is to the fetch A P I.

If you enjoyed this video, make sure to check on my other videos linked over here and subscribe to my channel for more videos just like this.

Thank you very much for watching and have a good day.