API Tutorial - Fetch Data with Axios - (Example in React)

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]

Channel: TechCheck

Views: 47,787

Keywords:

Id: bMRrSqWFKqM

Length: 7min 27sec (447 seconds)

Published: Mon Aug 23 2021