Make API Call to API Server with Axios in React Native

so Hello friends I am Niraj hope you are doing fine and in this session we will be connecting our react react native application with our API server so in the previous session we have already created our API server using go fiber and that is already running fine and all we have to do is we have to connect our API server or with our mobile app and in order to do so so we in the while we were developing this our contact screen so we have already marked it as a to-do so let us complete this to do and let us remove this to do and make it the fully functional so let I I will get right of this and this one also and here we will be using axios for making our APA calls and so in order to do that make an a API call so we have to actually install axios within our uh dependency tree so all we have to do is we have to write it something like npm install actually actuallyos is external Library so we have to simply just type in this command and hit enter and it will install xeos with into our application so it has already been installed and we will close that terminal and here with using xcos so axios returns a promise access calls returns a promise so uh the so it it has to be used in the conjunction with the async so we will this is our function so when user clicks on this send button so this Summit form is called so we will make this function asynchronous in a asynchronous using async keyword and we would be pretty much well to use a weight keyword so and by the way like any promise whenever a API call returns a promise so that may fail so any error comes in a promise has three states actually so that is why it is uh it is in we use a weight keyword so we will wrap each and every thing in a try catch block okay so like this so also we will create a API URL so our end point so our end point would be API URL and it would be however like in our application is running fine on using localhost port 8080 but since we are using device emulator so we need to use a different IP so that our our this mobile application can come can communicate well to the outside world so the IP is 10.0.2.2 and the port 8080 as always as like before and our route was contact that's it simple and now we will initiate our axios actual axios call so we will say const response or whatever responsible call Provide so we will collect into this variable and we will say axios and since we are going to initiate a post request so we will say post and the first parameter it takes is the URL so we will say API URL and the second parameter we have to actually provide the whatever the form data so already we have already collected uh the into this Json object so we will simply write it form data and simply like this and whatever the API response is so let us see in the console log so console log and we will say response response dot data cause it returns a data and by the way we forgot to use the await keyword because uh since it is a easy cross function and axios calls always returns a promise so that is why we use the awit keyword and if if in case there is any errors also we will console log the error console log and error simple so it looks to be fine and now it's it is time to test it so let us clear each and everything so yes so that is no console errors so okay fine so let us try to run it so we'll provide our name so neeraj Avinash and my mobile number is one two three four five six seven eight nine and we are testing with axios so let us try to send it let us see what happens so actually in the log so this is this has already returned a message and it is returning your make your query has been successfully posted and in the payload so here whatever mobile number we entered mobile whatever name we entered and whatever query it was there so it it returned each and every step as in the same way like what we had provided in the fill in the in the in the input area and with the success message also and we can also check it something like this like we can say here we can we can also check what is the Response Code so console Dot and let us type in here in the one and here response dot status so by the way so this this response what it is dot status is we we see that in header so let us see that what it actually does so it returns a 200 response because you may remember like when we tested our application that's API API endpoint using Postman so it was written it has returned a 200 Response Code so this is why this is the actual status the the IPA server return so we can we can also get it and we can also do our performer or our operation based on this status maybe something like this we can write it like if and the response dot status equal to equal to 200 then only write this console log or else don't do anything so we can do I mean we can we can also provide we can also let us try to do it so let let me create a another state variable so const form submitted and set form submitted equal to use state and here let us try make it false so our idea is like whenever if the form is submitted so in a state of displaying the whole whole this form so we will simply display a nice message that ok so your form has been submitted so that user can get something meaningful meaningful so we can do that so here we can set form submitted or let us make it API response and also update is set API response and we will simply call it this method and here we will see it uh let's say make it true so what happens that API response yes fine and now this thing we can check in our view before render like rendering when we when we are rendering so we will say a text so it is this text and here we can say something like API API response and we wanted like if the API response value is true then we will show a message so like your form has been posted or submitted so we will say form submitted and so since so here we are seeing the form has been submitted okay so we can we should do one more time one more time like uh when the when this screen first loads so that is that text is not visible and when we submit it so Niraj and one two three four and X yours it's a wonderful and when we now when we send it so here we are saying that form has been submitted and we when I think like we can also hide the whole this form so we will again see something we will start a block and this time actually we will see API response and we will say if API response is false then only show this form otherwise don't show the form so we will say something like this this and we will copy whole this form data and we will drop this data here something like this save it so we are not seeing the form and if we reload our screen for the very first time so the form we are seeing so this is it and I think like you enjoyed this session so anything any question or any thought so please don't hesitate me on if you have any suggestion for me so please drop me a message and I will incorporate your suggestions and advices in the my next coming sessions so till then take care and happy coding

Channel: Grow Your Skill

Views: 2,657

Keywords:

Id: -B_GPm8V3as

Length: 11min 42sec (702 seconds)

Published: Mon May 01 2023