fetch

Learn Fetch API In 6 Minutes



Sharing buttons:

hello everyone today's video is going to

be a quick video where I show you how to

use the fetch API built into the browser

in order to make asynchronous requests

to different network resources by using

get post put whatever it is that you

want to use so let's get started now

welcome back to web dev simplified my

name is Kyle and my job is to simplify

the web for you

so you can start building your dream

project sooner so if 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 JavaScript page open

on the right hand side which is open the

console 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

whatever we do over here we can see the

result of over on the right and to get

started as I mentioned we're going to be

using the fetch API we're just going to

be hitting this fake API 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 API or we can just

get a single user for example and the

way the fetch API works is you pass it a

URL 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 going to need to

use these options but to get started

we're not gonna use any options with

fetch and we're just going to log this

out to see exactly what we're getting

returned so we'll say console dot log of

fetch and if we save that you see that

we're getting a promise on the side here

so we know that fetch is promise based

which means that we can use async await

or we can use a dot venn and dot catch

with it and if you're not familiar with

promises or async await 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 what we need to do is we need to

say dot then and fetch is going to

return to us a response so we have a

response object and we're just 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 so status text is

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 JSON since

we're actually using JSON data so what

we need to do is say res dot JSON and

this is going to return another promise

so then we need to use ven again and

this is going to be our actual data we

can say console dot log of that data so

as you can see we have all the different

data on the right head side here it has

page numbers as well as all the

different users that we're getting from

the API 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 going to get user

23 which does not exist so we're gonna

get a 404 status back and when we save

this you're gonna see that our get

request actually happened but we still

ran our successful dot venn code even

though we had a 404 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 to log

some text that says error for example

you can see we're not getting any error

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 going to get a

failure is if you have the failure with

fetch itself and not with the API you

are calling so what you need to do is

inside of your response you want to

check to make sure the response is okay

so inside of here what we can do is we

can say if rezzed okay then we know we

had a successful response we're just

gonna for example console.log success

else if it's not successful we're just

gonna say something else we're just

gonna say not successful there we go and

now if we save that you can see we get

not successful because this was a 404

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 OK

response essentially it's in the 200

level status codes between 200 and 299

now that's good null but with fetch many

times you want to do more than just get

day

from the server you actually want to

post data to 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

can be either get post put delete it's

just one of the HTTP methods so in our

case we're gonna use post we're going to

create a new user at this API 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 and we're going

to pass that add some JSON so let's just

come in here and give the user a name

and we can just say user 1 is the name

and we can tidy up this code here we can

return just res JSON make sure we return

that and there we go now if we save 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 if there's no name for our 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 need to send it JSON so you

need to do json stringify and actually

stringify the object that you're passing

it just like this now if we say that

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

JSON so we're gonna pass it an object

and inside this object we can set the

content type and we want to set that to

application slash JSON 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 JSON 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 JSON and you also

need to stringify the body so you can't

just send a JavaScript object you have

to convert it to a JSON string and

that's something that trips up a lot of

people when they're first messing with

fetch and that's really all there is to

the fetch API if you enjoyed this video

make sure to check out 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