React Axios | Tutorial for Axios with ReactJS for a REST API

react Axios and using the two together if you haven't heard of it before it's one of the most popular promise based HTTP requests clients available and it's used all over the place whether it's in JavaScript on nodejs but in this example we'll be setting it up on a react application performing some gets inputs and passing in data as JSON we'll start by installing it and to do this we'll just jump into our react application project folder and run npm install Axios this will add a to our dependencies in our package search JSON we'll start our project by running NPM star and we'll browse into one of the components in here we'll import Axios by running import Axios from Axios now if this reference done we can add this into our component if we have an API endpoint we want to use we can initialize Axios with an instance and we do this by running Const api equals axis dot create with this function here we'll pass in an initial configuration with a object and this will have a base URL in this case we have one over here which we'll use and we'll pass this in as a string we're going to access this API endpoint and we're gonna do it by performing a get request to pull in all this JSON data we're gonna do this by calling a constructor which will run every time this component mounts and with this we'll call the API and perform a get request we'll just pass in a blank path and we'll run the then command which will get a response back with this response we'll have a bit of data here and what we really want is to console log out the actual data itself so let's put this in here and take a look at our console to see if that came across well there it is and here's our array in JSON format so how can we use this in a react well we can create some state and in here we can have our courses with these in here we can have an empty array that gets populated when we run our constructor by running this dot sit-stay and setting them against the rest of data that we get back let's apply this and next let's put these into our react component we'll put this in our render method and over here we'll call this dot state dot courses we'll map this out and for this loop we'll set the name as course for an individual item and we'll create a h2 tag in here we're passing the cost of title in here and we'll also set a key so that each individual item is referenced properly so we'll pass in this key a cost dot ID let's save that and we'll see that it appears in our application we can use Axios to also talk to the rest api and create new items in our database by calling a post event we can do this over here by creating a new function called create course for this will have an async function and this will then use api post to just reference the main path and pass in a data object in this case it'll be an example of a course so it'll have a title such as test it'll have an ID such as maybe number 4 and no author such as test as well then we can run a different query here called a weight this is because we're using async and we can pass in the response over here once we do this and console.log it out this will be created in our database so we can take a look at it and it should react every time we select this function to run in this case I'm gonna create a button for it over here and for this button I'm just going to reference the method that we've created an onclick handler so I'm just gonna run this dot create course well this button I'm gonna select it here and refresh our application and you can see that the test course has been created right now our application isn't reacting very well because it's only pulling in the data on the constructor method so we can pull this out and create its own function by calling given courses here we'll create another async function and this time we'll clean up the syntax a little bit let's do let data equal oh wait API get and this time we'll just pull in the data straight away as an object and return it so that we can use in our set state then finally over here what we can do is remove this and just call set courses to equal data we'll save that and then we'll run this dot get courses in our constructor method and we can also put this into our create courses event as well and that way every time any reaction is made this will automatically update so what we can do now is create a delete method and see if that automatically updates will create a function in here called delete course and this will be an async function that will have an ID pass to it and this ID will pass into Axios to use for our response will run let data equal await API dolly and for this delete function we're gonna pass in the variable of the ID so we'll do double sign ID in here and that should work now all we have to do is create a button to execute this function so let's create a button here in our map and we'll just do an X will run on click and we'll pass a function in here that will run this delete course and pass in the course dot ID let's save that and finally we'll also run the function this don't get causes so we can see if it's been updated when we delete it so now we can delete a course and we can create a course and that seems to be working very well with Axios we might also want to be able to update some of the data in our API and we can do this by calling a patch request let's create a new function to see how that works we'll create update course and this will be an async function which will pass an ID and maybe even a value over in this case now in this case what we're gonna do is just update the title of the course so what we're gonna do is create a let data equals a weight API and this will be patch in here we're gonna pass in the ID that we want to reference so in this case the ID is going to be the ID we call in our async function and we're gonna pass in the new data that we want in this case we just want to update the title to be the value that we've set across so we'll run this and then we'll run this dot get courses now finally what we're gonna do is create something very simple where if you select the course it adds a letter a to the end of it so we're just going to do an onclick handler here for a h2 tag and what we'll do is call in the same sort of function we did for our delete but in this case we're gonna call update course what we'll do is we'll pass in the course ID which is over here course dot ID and we'll pass in the same course name that we had previously but add another letter to it so over here we'll do course title and just add the letter A to the end let's save that and click on one of our courses and we can see that the letter A is appearing if we refresh it stays consistent because it's already been updated in our REST API API requests aren't always perfect so if you're using async functions it's really good to be able to do try-catch loops so let's set some of these in here let's create a create a try-catch loop here with an error handler and console I'll log out the error in case it happens this way in case our API endpoint can't be accessed we can make sure that we find out what's causing the issue and that way we don't have any errors that will cause our application to crash alternatively you can actually pull this request in with a catch directly inside so if an error happens you can console.log it out or do other actions as well and this is useful in case you're not even using async functions if you have multiple api's Axius can be used without setting an instance and let's give that a shot over here we can do a let data equals a weight and just call Axios directly we can pass in the method and this in this case will just be a get we can also pass in the URL and this URL can be the same that we set previously but this will give us an example of how it works and finally we can pull the data out and apply the same function with the same results sometimes you might want to implement things like unlimited scroll or pass variables in where you get requests and we can do this with axis as well in here we can actually pass some parameters so let's create an object for that and with that maybe we'll just set a limit and for this limit maybe we only want to show three courses so let's apply that and refresh and we can see that's being working so if we create a new course we can't see that happening because we're only limited to the first three we can add other things in here such as for example putting in where we start so let's do start on maybe object two and if we refresh now you can see that we're starting on the second object and we're getting the last two here which is the JavaScript and the test course if we delete this and refresh then we're gonna only get the last one in there but if we start at zero and refresh we get all three so this is a way you can use parameters to make sure that you're passing in the get request of course you could always manually put in here with a question mark but this is more friendly and allows you to pass those attributes in a lot easier sometimes you might also be accessing API endpoints that require you to use a token or a key and X just makes this easy as well you can create headers here by just passing in headers to the initializer and create anything you want such as X dot - old - key in here we can pass in a token key that's maybe token one two three now this can be reset when it user locks off or it can be generated when they login and all your requests using the API key over here will be added to your requests whether they're gets or puts and make sure that the user is properly authenticated I hope this video gave you a good idea of what it's like to use react and Axios together obviously there's a lot more to it and you can do a lot of things like adding it to a store maybe even just using it as a once-off in plain JavaScript and using it in a node.js application we might take a look at some of those examples in another video otherwise if you like this kind of content and you want to see more like it it'll I can subscribe and I'll see you next time Thanks

Channel: Adrian Twarog

Views: 267,853

Keywords: react axios, react axios tutorial, axios react, how to use axios with react, axios react hooks, axios react api, react axios get request, react axios async await, react axios cors, react axios post request, react axios crud, react axios api tutorial, react axios http request, react axios put request, react axios login example, react axios get json data, react axios get bearer token, react axios get request with headers, react, axios, http request, post, json, javascript, tutorial

Id: 12l6lkW6JhE

Length: 10min 37sec (637 seconds)

Published: Thu Apr 02 2020

Reddit Comments

[u/justadude0144]

How is this different from any request and response dispatch mapper calls using redux

[u/BodyBilders]

Still class-based component...Otherwise, I like axios.