How to fetch an api in javascript
Learn Fetch API In 6 Minutes
Timecodes:
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
Related queries:
how to fetch data from an api in javascript
how to fetch weather api in javascript
how to fetch post api in javascript
how to fetch two api in javascript
how to fetch image from api in javascript
how to fetch data from api in javascript w3schools
how to fetch data from api in javascript stack overflow
how to import fetch api in javascript
how to fetch json data from api in javascript
