How to fetch data from api in typescript
4 - React Typescript Crash Course - Calling API & Fetching Data
Timecodes:
hello again everyone so in the last
video we had a look on how
the states and react works and how they
use effects works in general but we need
to use those concepts to fetch our data
and use manipulate those data inside
inside our application
so to fetch the data we need to make a
call into that url and to this
um to this url i will make this bigger
so basically we need to
to call this url and fetch those data we
need to make a get request
so in order to do that we can use
something um some api
already imported inside react which is
fetch api so fetch api is like
it's like a http client
we can use in our application to make
http requests
so what we can call the fetch api
we can simply call fetch
and then we
put the url we need to
call
and then we have a response
and that response
is like a promise
so
we can
we will get a promise and to resolve the
promise we can resolve it inside then
so the response
will be a whole
http
object
so from that http
object we only need to extract the json
response the json result
so in order to do that
we call
response.json to get the json
extract the json from the response
and then
that also
um
is
we need to resolve this um
this response
uh we need to resolve this promise
and order this also gives us a response
with with the
json json data
so we can simply right now manipulate
these data
in our case let's say that we need to
display and let's see this this data
so let's make a console
apple dress
let's save
so this use effect will be triggered
once the component been rendered so if
we open
our react app
and
press f12 or
again you can use your
press on on your browser and on the
right
uh
i call call this inspect this will open
the dev tool window
inside the browser
go to console and you will see that we
have an array and inside that array
we have a response of
about 20
200
records
each record represents a to-do
so this data is coming from our request
this data
is coming from this request and we are
just displaying this data inside our
console log
inside our console using console.log
so in our case
of course we don't
need to
just display the data into our console
but rather than that we need to set this
data inside to do's
but
let's say
that we don't
in our case we don't need all these data
we need just a sample few data we can
use inside the application
so in this case let's say that we need
um
10 records from those 200 records
so to do that we can apply some array
method
on this
on this response object or yeah
this response array
so we can call slice
method
and that will take
two
uh two parameters the parameter the
first parameter is the
first element in the array you need to
start from which is the first one
zero index
and then the last element which is not
included
which is which will be not included the
last index
so
basically we are telling the
res to return
the first one until
index nine
i hope that's clear so let's console log
the response and see what we get
so basically let's close this and see
the other one yes this is the one
so basically we are calling the api and
fetching like 10 records and each record
is
a separated to do
to do objects
okay this is exactly what we need
so what we need from this data we need
to store these data inside our states so
we can use this state inside the
application
so in order in order to do that
basically we can instead of console.log
we can call set to do's
this one this method
to set the data inside to do's
so basically we are storing b to do's
inside to do's states
great
but also the fetch
after
uh making a promise we need to catch any
errors
so to catch errors we call catch
and then
error if there's any error
let's console log
sorry
let's
also
log
the error
but in normal cases you can you can do
something like this
so and if there's any error just display
it
inside
a state or just store it inside the
state so i can use also this error
inside the application
error it's called like it's called like
uh error handling so
if i call if i create
if i create a state and i will call this
error
and this
state error
sets not stay set error
and then
[Music]
i need to to use to use it like
an empty object
this is the default
the default value for error
so basically here what i need to do i
need to call sets
error
to set the
error
to set this state with the error if we
have any error
so basically we are making um a fully
uh handled
get request into into the api and
fetching the data
storing the the response and storing any
or catching any any error if we have
so um
in the next video we will complete and
what go ahead with you with our
application
so thanks thanks for watching and i will
see you next
Related queries:
how to get data from api in typescript
how to fetch data from api in react typescript
how to fetch data from an api in angular
how to fetch an api in javascript
typescript fetch get example
web api fetch example
fetch api get example
