React GET Request with Axios | Async Await

in this video i'm going to show you a simple example on how to do get requests in react with axios we will be querying json placeholder which is a fake api useful for testing just to get some data get requests are asynchronous meaning they promise they'll get there and they usually do to handle this efficiently we'll use async and await don't forget to like this video and subscribe if you want to see more content like this every week let's get into it [Music] okay now i i have navigated to the folder in which i want to create my project so in here just type mpx create react app and then the name of our app which in this case will be just get requests and hit enter this will create our react project for us now that that is done let's navigate into our newly created project like so and you can see this by it's saying master then in that folder i like to just drag my newly created project into the vs code window and then we got our entire project imported here so let's just remove the code we don't need and make sure that everything works correctly so let's remove everything here just let the divs remain and then just create a h1 that says test like so control you can open the terminal in this window as well the shortcut might be different for you but let me just do it here and then we'll say npm run start to start the development server and that should happen automatically and we see test so everything works fine one important dependency we need before we can begin is axios and we will use axios to actually do the get request so we need to install that dependency so go into your terminal here click control c to quit the development server just clear and say npm install xc yes hitting encapsulator axios like so and that should install axios in on in our project yeah so when that is done we will just import it up here import uh say say it like this axios without the quotes actually axials from excels just like that and we can just remove the logo here because it won't need it okay now we can actually create the code to do our get requests so above the return here inside our app function we can start creating the function that will get our data so we'll just call this function getdata and it will be an arrow function just like this and here we'll create a variable called data which would will do the axios get request like so and then we need to pass in an url to the place we actually we are actually going to query so let's head over to jsonplaceholder holder right here and we'll just take this string to query that endpoint so let's paste that in here just like that this is not enough actually to do the request because this function is not fired right now it's not called so we need a place for this function to to get called every time we refresh the page so to do that we can create and react hook called use effect to make that happen so we'll just call use effect we don't need this and we need to import use effect from react like so and we don't need anything there in the dependency area but inside here we need to call this function get data and this can actually be inside here as well so now this function will get called on every refresh of the page as soon as the page renders this function gets called and we're still missing something because this because we're using uh doing a get request this is an asynchronous operation so we need to make this asynchronous as well so make this function async and we will put on a weight here to await the uh result from the axios get requests from this suggest and placeholder endpoints so what we are missing right now is some kind of state management for this data variable so to to fix this we can use the use statehook as well so let's create the array here and we'll just call this fetch data and set fetch data for setting that vari or changing that where variable so this is the function that changes this variable state like so and we'll just put an empty array as the default state and we need to import this hook as well from react like so so in our get data function we need to set the new state somewhere so let's do that after we done the query set fetch data and we'll just set it to data this local variable like so and now we can actually console log out the data from that query by console logging patch data so this state variable let's save that and take a look in the browser refresh and let's see in the console need to wait two seconds here yeah because i haven't started the development server start to start the development server we can just quit that and let's inspect to the console and we're not getting anything right now yeah here it is as an object we see the data right here so we're interested in the title so we're about to display the title so we need to attach that to the jsx file so we'll do that next okay so there there's something uh with our jsx we need to uh be mindful of when we do get requests because sometimes the data hasn't been received yet so we're just trying to display something that's not there yet so let's just take a look at how that actually looks so if we say fetch data here try to access our title uh title uh value on that object we say data.title like so and we try to check that out in the browser you see we're getting the error category property title of undefined that's because we we need an actual node check we need to check if this is null then we'll not display anything but if it's there then we'll display something so to do this we'll do a ternary expression we'll say fetch data dot data and a question mark like an if statement if that is true then we will return this and if not then we'll return null or nothing so let's check that out see if we get an error still and now no errors because we're checking for uh null and if it's not just display the data as normal so now react seems to be satisfied

Channel: Red Eye Media

Views: 502

Keywords: axios, reactjs, react tutorial, code, programming, developer

Id: ljYh9R4rNto

Length: 10min 37sec (637 seconds)

Published: Sun Aug 01 2021