How To Make An API Request in ReactJS With Axios and Fetch - Tutorial [2020]

hey guys how's it going i'm back here with another video and today i wanted to make this quick video where i'm going to be teaching you guys how to make an api request to any api you want using react this is more of a beginners video so if you're a beginner i would recommend watching the video and i'm going to be using something called axios which is a really nice library in react and i'm also going to be teaching you at the end how to use the fetch function which comes with javascript but i would actually recommend using xuse which in my opinion is a lot better but i'm going to be showing both ways so you guys don't get confused and before we get into the video if you guys could drop a like or comment down below i would really appreciate it because i'm posting every single day and it would really help a lot so as you can see right here we have a simple react application that just says hello youtube it has nothing added to it and we're going to add it on our own so you can see that the application is running and basically what we want is we want to make an api request to a free api and if you don't know what api is an api is basically anything any type of application that can be hosted on another project anything that we can use to add to our project and this would include for example having access to a database so i got this api right here which is called official joke api and it's free it's completely it's very easy to use and this is why i chose this for this video you can see that we can just try to reach the endpoint random joke and it will drop a random joke to our face so for example this one is uh if you're an american you when you go into the bathroom and americans when you come out what are you what are you when you're in there and the punchline is european i don't i don't have i don't even want to try to understand that but that's okay so basically this is the api that we're going to be using i'm going to drop the link for the api in the description if you want to see it's really like you can choose any api actually i'm going to drop also the a github repository with a bunch like a 100 or 200 different free apis that you can use and you can make different projects with it so the first thing we want to do is we want to download xuse so if you come here to our to your project you want to open a terminal and if you're using yarn you can write yarn add axus like this right here but if you're using npm you can just write npm install axios and i have already installed it in my my computer but it's extremely fast and it should be done really quick when you have access installed you want to import axios you can come here to the top and say import axios from axios and axis will allow you to make a get request to any endpoint that you want so specifically in this one we want to come here and just create a function for example so i'm going to create a function called get joke and it's going to basically be a function that whenever we call it we're going to get a joke we're going to receive a joke we're going to display a joke in our screen and in order to do that we want to write dot get and basically when we when we say get we basically are getting everything that is like every response given by the url or the endpoint that we grab so you can see that when we try to reach this endpoint right here this is a get request basically we're trying to reach it and whatever is responded over here is whatever the get request received so when we just try to reach this end point right here so i'm going to copy this and we come here and we can just say here put a url if we pass this this is going to receive this right here so it's going to receive the joke that we that that it's going to be displayed so right after the access.get we can make a dot then if you don't know what what this means basically this is a promise meaning that we're going to try to make the respon the request first for the api and after it receives it's going to run a function which will receive the response meaning this right here this right here this is the response and it's going to store it in a variable called response and now inside of here we can pass whatever we can do whatever we want initially let's just console the like the the response meaning we want to see the joke in our in our console right but also one thing that is important to understand is currently we don't have anywhere where we can call this get joke thing so let's create a button very quickly here so we can create a button saying that it's going to say get joke right now and it's going to appear in our screen it's over here and let's press let's pass it on click event right so let's pass on click and on on an on click event we can just pass the get joke function and whenever we click on this button it's going to call this function which inside of it is going to make the xs request to that api so let's save this and let's open our console log so over here if everything is working we should click on this and a random joke should appear in our console so we're going to click over here you can see that we received we made the request it says that it was successful and there's something called data and the data basically is the response as you can see right here it gave us a joke which again this time it says why did the worker get fired from the orange juice factory and the punchline was lack of concentration that is the worst joke i've ever heard but that's okay so you can see it's working and if we want to display this we can easily just create a i don't know um maybe a state so if you guys know what how to work with states we can just come here and say const joke set joke and it's going to be a state that is going to basically uh basically store the joke right so it's going to be a string we can just come here and by the way let's take a look at the data that we receive so we're receiving an object as i mentioned as the response and inside of here it has a data property so instead of this data property there includes everything that is responded by the api request as you can see there's the punch line there's the setup there's even the type of the joke and there's even the id of the joke so there's apparently more than 300 jokes in this api which is really cool so what we want to do is we're going to grab the we're going to set the joke so set joke equal to the response dot data dot setup plus the so we're basically going to this is the setup is a question as you can see right so we're going to add i don't know three dots after the the setup and after everything let's add the response data dot punch line so we're gonna we're gonna display everything inside of the set joke so punch line okay and here at the bottom we can just call the joke inside of two curly braces meaning that we're gonna display whatever is this joke variable right here so let's save this and let's actually remove this and now let's click on this and get joke should display something in our screen why is better peter pan always flying because he never lands that's actually a bit a little bit better than the last one but as you can see it's working perfectly and this is basically how you make an api request using exuse so now i'm going to teach you guys how to make an api request using the fetch function from javascript if you don't want to get too complicated i honestly recommend using xuse but just so you guys know i'm going to be showing you guys how to use fetch okay so in order to actually use the fetch function instead of the axios you actually need to remove axis.get and just include fetch it's already a built-in thing in javascript so you can just pass the fetch however there is some stuff that are a bit different one of them is that we actually need to copy this set joke thing and we're not going to do that instead of the response basically the idea of fetch is that let me let me just change this a bit well when you use fetch you want to after the dot then and you're grabbing the response you want to say that response dot json so respond.json this is basically going to um turn the response and parse it into a json object so that when we come here and we say dot then we can just pass grab the data that comes from that response so data and we can just come here and create a function that will do the same thing but instead of grabbing response.data it's just going to grab the data and we can just remove this and we can save this so this is the basic standard fetch.then response.json.then data and then the set joke so we can come here and click right here and you can see that another joke appears why didn't the number four get into the nightclub because he is too square i don't what i don't even understand that but that's okay so basically this is it this is the what i wanted to make in this video i'm i i hope you guys enjoyed it this is i would actually recommend using axios as i mentioned before because as you can see using fat is weird i don't know why you would use fetch instead of axios the only thing is that with fetch you can customize more your headers there's different aspects that you can work with in fact that you can't do in nexus however honestly i would recommend using axis so i hope you guys enjoyed this video if you enjoyed the video please leave a like down below comment down below and subscribe if you want to see more and i see you guys next time

Channel: PedroTech

Views: 134,958

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, postgresql, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js, node js, express js, session storage, pedrotech, how to make api requests, axios tutorial, how to use fetch, api requests in react, how to use axios with react hooks, how to use fetch in, how to use fetch in javascript, reactjs hooks tutorial, free api, clever programmer, traversymedia, derek banas

Id: rpg1jOvGCtQ

Length: 9min 49sec (589 seconds)

Published: Tue Oct 20 2020