How to use Fetch with JavaScript

Sharing buttons:

when it comes to making HTTP requests

inside of your JavaScript cords you can

use a variety of different options you

can use things like XML HTTP requests

you can use a third-party library and

more recently you can use a fetch so

what exactly is a fetch well to start

with we can provide a link such as the

JSON placeholder API and we'll use slash

or posts for this and this is going to

be the API that you're looking to

interact with and as you can imagine

because fetch is promised best we can

set dot then and will then have access

to the response so we can get the JSON

from the response if we say it rares

don't JSON and that is a function and at

that point we can log out the posts I'm

going to surround this inside of a get

posts function and now whenever we call

get posts it will of course return us a

promise that navigates to our REST API

returns back at be JSON ie B body from

that API and then of course just logs

out to the console at this point so if

we head over to our JavaScript console

now and if we hit that fetch data button

then I've made we can see that when we

call that a function we do of course get

the data we get the body of the post the

ID the title and of course the user ID

for whoever made that post as you can

see if we look in our network tab we can

see exactly when that request was made

as well as the response as we'd expect

so this is obviously a get request we're

not posting anything to the server

we're simply requesting it from the

server we can change the method in which

we can interact with this for example if

we made a new function called new post

and that will take in a post and we

return a new fetch pointing at the same


this time we want to customize that

request but before going much further I

want to navigate over to the Mozilla

developer Network documentation about

using fetch there's a massive a variety

of examples which you can see if you'd

like to really go into depth about how

fetch works and the variety of different

use cases I definitely suggest that

these dogs but for now it would be a

good idea to make some options so the

options will allow us to pass these

options to the fetch call and the method

that we want to use is now post by

default it equals to get so that's what

we don't have to specify it when we

simply want to get the posts for the

body we need to specify a new post so

this is the post that comes in here one

important thing when it comes to the

body is that the body has to be

stratified so let's add json stringify

and we want to string a PHY the new post

next up we're gonna send some headers so

we can say new headers the head is that

we want to use here is the content type

and we're gonna set that to your

application slash JSON so when we come

to using this method here we can replace

that for a variety of other things so

this could be putt this could be delete

but for now we'll keep it at post let's

pass these options to our fetch call so

you'll see now that this fetch has these

options and if we weren't expecting a

response we could convert that to JSON

we could then if we want to do something

at this stage we'll simply log it for

now and if there are any errors we can

catch an error so for now once again

we'll simply set console don't hora will

then sit or our ID logout the IRA to the

console so now the final thing to adding

a new post is of course making that post

a variable so let's make a title all

about fetch

the body of the post is fetch is so cool

and our user ID might be something like

one we can then make a new post passing

in that post and by doing so you can see

that we have indeed made that Network

request so let's run our function and

send that post request to the server you

can see that the post has been made it

has the ID of one zero one because

there's only a hundred posts in the

dataset and any more posts are of course

above that 100 number and if we look at

the exact line of chords we can see that

this was the response after it had been

converted to the JSON body so it wasn't

an error and everything did work as

intended now the same then goes for

modifying something so if we used

something like putz we just changed the

method from post and instead we'd use

putz and finally when it comes to the

delete method we do that once again so

without making this too long of a video

this is the essential use cases for

fetch we want to a poster we want to get

we want to put and of course we want to

delete there are other ways and other

methods in which we can customize fetch

even more and I recommend you check out

the documentation to see how you can do

that and attend next time hit that

subscribe button to stay updated with

more videos and of course let me know

what you'd like to see in the next video

inside of the comments thanks for

watching see you soon