How to fetch data from api using axios in react js
API Tutorial - Fetch Data with Axios - (Example in React)
Timecodes:
what's going on guys
today i'm going to show you how to make
api calls with axios
api stands for application program
interface
it's basically a url that you can put
together in a certain way to query for
certain data from a given application or
website for example spotify could have a
public api which lets you get access to
artists and albums
and it have documentation on how to make
a url that spotify server can understand
and you can correctly retrieve the data
that you want
using axios and making api calls doesn't
have to be for third-party apis either
you can use axios to make calls to your
own backend in your own application
so i have a button here that will fetch
a quote from an api and display that
quote
only right now it will not fetch that
quote
so we'll use axios to do that
we'll have to install axios
so in the command line here we'll do
npm
install
axios
save to put in our package.json
clear that
then we can
import
axios from
axios
so this is that button that says get
quote
so we'll say on click
of a function called
get quote
we'll have to make that function
and we'll type axios
that'll be a get request you could do
get or post
and we'll pass in the url as a string
i'm using this
random quote api
and that's the url for that
and then you can do a dot then
which will return a promise once this
api call gives back a successful
response
and then we'll get access to that
response
that we can use in a callback function
i'm actually going to put this on
another line so it's easier to read but
that's
that dot then is chained onto this
axios.get
so i'll just go down here just so it's
easier
and this is the response we'll get
access to
a lot of times you'll see
res for response
and that's if we get a successful
response from this api call
there will also be a
dot catch we'll get access to an error
or sometimes you'll see
err
for error
and then we'll get access to the error
as well
so for now
in the successful response the dot then
we'll do a console.log
and we'll put the response
and in the dot catch when we get the
error we will
console.log error
so if we save that
open up our console here with option
command j
on mac
i'll hit get quote
and this is our response which is an
object
and one of the properties in that object
is data which is
where we'll get access to the data that
we're trying to get back from the api
you'll see we have the author of the
quote
and then the content will be the quote
so if we bring this over
do not go where the path may lead go
instead where there is no path and leave
a trail it's deep
make sure you like and subscribe
so that's the response so this is an
object and then there's the data
which is also an object and then there's
content so
we'll do response dot data dot content
save that
well console.log that
and now we get just the quote
our passion is our strength it's deep
so i'll get rid of this
and now we'll display that quote
so i'll use some
to use state hook for this
import
use state
from react
call it quote and set quote
use state and the initial state will be
an empty string
i also have a video on how to use use
state i'll go ahead and flash a card on
the screen so that you can watch that if
needed
so then down in our
response here
i'll do a set quote
and we'll set that to
response.data.content
and then down here in the rendered part
of our component
i'll put a paragraph tag
and i'll put the quote
and actually we should check
that there is a quote
oh let's put this
all in brackets here
so we'll say if there is a quote
we'll display
that
and if not
null won't display anything
and then actually even a quicker
smaller way of doing the same thing is
if we
do quote
and that way it checks for a quote if
there is a quote
it'll return
the quote in paragraph tags
so save that
hit this again
once you choose hope anything's possible
pretty much the most inspirational thing
i've ever heard in my entire life so
just make sure you like and subscribe
that's all for today thank you for
watching
[Music]
Related queries:
how to fetch data from api using axios in react
how to get data from api in react using axios
fetch data from api using axios
how to get data using axios in react
![How To Make An API Request in ReactJS With Axios and Fetch - Tutorial [2020]](https://img.youtube.com/vi/rpg1jOvGCtQ/mqdefault.jpg)
![ReactJS Course [7] - How To Fetch Data From an API in React](https://img.youtube.com/vi/je3FTTunyp4/mqdefault.jpg)
