Axios Tutorial | Axios Tutorial For Beginners Full Course | Axios Get Post Put Delete Tutorial

welcome back to Arc tutorials this is axio's complete tutorial series in this particular series we will learn what is axios what are some of the features provided by axios and what are the different variations in of using it in a vanilla HTML file we can we learn how to use it in a node.js express.js and I'll also show you how the same thing applies in react and much much more after this tutorial series you will be able to completely learn and master axios and start using it in your projects on a daily basis with that being said let's get started this is the part one of the series this is a playlist index uh what we'll be covering in three parts in the first part we'll be talking about the installation features introduction methods and some basic get request in the next episode that would be more of coding heavy where we will do get post put delete Etc in the final one uh we'll learn how to do concurrent requests we'll see how to set some of the header options and also we will see some of the error handling of how to handle it properly so those are the three part series and I hope you will enjoy this series as much as I am enjoying bringing it to you all right so let's start with basic introduction first so axiose is a simple promise based HTTP client for the browser and node.js axios provides a simple to use library in a small package which has a very extensible interface now there are a couple of important things here that you should know for one in most of the react applications or express.js or node applications this is what is used heavily okay that's what number one axios is used heavily number two it's a promise based that means you can do lot of stuff with promises like how to return when to return what to do with the data that's written except data and HTTP client right which means it will be used for making HTTP request and processing the HTTP responses so that's all you should know about xeos because you're going to use it really heavy especially on react and node.js applications let's talk a quick overview about the features that are provided by axios axios provides uh helps us in making the XML HTTP request calls from the browser we can make HTTP request from node.js right like like at the back end which is implemented in JS like express.js or something it supports promise API that means all the HTTP calls are promise based we have Provisions to intercept the requests and the responses and transform them we can also cancel requests at any time and we can transform the Json data and it protects from any xsr access or protecting or any attacks all right what are the some of the major use cases that you will use at your sim some of the common use cases are you will be making HTTP requests in node.js you will be making HTTP request in express.js you'll be making HTTP request and react apps and also in plain vanilla index.html also all right so what are the different ways of using right so there are three flavors or four flavors that we can use in different ways the first and the four most simplest way let's say you're not using any advanced framework like react or node.js Express Etc you're just building a simple HTML page where you want to make a call right and HTTP calls for that you can use xios as well so I'm going to show you that also first then we'll go towards the node and express.js all right so the fastest way to use uh is actually ocdn so you can search for axio CDN and you will find many um of them you can use you use JS deliver you can use any uh any particular CDN that provides you with any link okay so here you see you have the link copy that script link and now we are learning about how to use it in a simple way so let's get started I'm going to first create a folder and I'm going to name it learning CEOs right and then we are going to I'm going to open so this is a simple HTML file so inside this I'll create a simple say index.html head tag body okay and what we're gonna do throw in a button say on click data is a method will implement all right and what you'll do is in the head section include that script that we copied which is nothing but the CDN linked to the axios.min.js and here on button we are just calling a method all right so here you have the script and here you can just start using axios okay so let's Implement that method and say get data and we can Implement our axios implementation here all right so what is the simplest way to get started like I said you just have to make a simple HTTP call and you can get your things done okay so let's go ahead and do that now so I'm going to Simply type CEOs dot get okay so axios the library it's the method object and then the method you'll call is dot get okay now when you say get out get you need a URL so the best way is uh Json placeholder API you can try that it's a free fake rest tape restful API so you can copy this URL and play with all the crud operations or any dummy request you want to make so copy this URL and go back to our application and I'm saying make a call to access dot get that means use the get method and then call the URL which is the Json placeholder API that we are using now here is a tricky thing you can then do dot then okay and then it will take a function which would written a response so here we'll get the response closing I closed it here okay and then you can also dot catch of the promise failure right if there is anything failing you can always uh you can close it here so that's your basic structure of any axios object that you will create for making a request now you can just lock it here say response Soul Dot Lock error okay that's it simple so if you simply want to use an in an HTML file all you need to do is include the CDN and call this method and implement the axios as it is in the method right let's see this in action now all right so I have this button let's also open inspect and now I'll click on this method and it is getting the data and if you see the data that we have got it's getting the correct data which is from the API that is getting the ID of number one with title to test this you can also change the values here and make it 10 or any value you want say five whatever you want refresh click now your data will have Title 5 right so that's a plain vanilla implementation of axios in any normal HTML file that you can start using the next way is I'm going to show you how to use it with node and express kind of a setup because that's where you'll be mostly using or with the react app the methods the implementation is same how you call it will be little different okay so let's go to that and let's set up express.js.com and I'm going to really quickly create a folder inside this and say Express underscore tutorial all right and then we are going to go to all right so I have my terminal open and what I'm going to do is npx Express generator this will create a quick express application the dummy one that comes up so it created and we can see here inside this we have our express application so go into Express we are already inside that okay so all we need to do is npm run start and we didn't do npm install so let's do that and now to npm run start so our server is up and running okay that's the fastest how do we know we can go to localhost 3000 and it should say Express right so our Express server and an application is up and running on Express now let's close this and install axios so axios is installed now let's go ahead and Implement that in any app.js if you see this file the first route goes to index router click on that so we'll implement it here we'll say const iOS is equal to require close that's it so if you're writing a react app you'll probably be writing it as an import statement right in Express and node.js we write it as require in react you'll probably be writing import actions right all right so that being said once you are here let's say you want to make axios call you will again do the same here you will pass the properties and same method that we implemented earlier right so how do we do that same just exactly same way let's follow the same process okay let me write otherwise copy it from so I'm just copying it from here just to show you that it remains same okay all right so there we are so now we have just copy pasted the same code that we wrote for Standalone axios usage inside the index.js so now when we call index.js we should see it in the log right now let's go ahead and reload this we should see it logged here you see it made a call to this API and it console log the message but let's say we want to send data right so you can do that as well instead of this hard-coded value we'll say response dot data Dot title right because it's inside the data object and the attribute we are mapping is title perfect so now when I reload I should see the dynamic title that's coming from the API right so that's how you include this is this tutorial is mostly about how to get started with axios I showed you with a standalone in a simple HTML just include the CDN and you can make the calls or if you are working on a node or Express setup you would install it via npm and require and then start using that object all right so once you create an instance of axios you can start using methods like get post put delete which we are going to learn in the next episode so I'll keep it short for now because the reason is I want you to know how to start using okay so some of the things that should you should know about axios is axios will support these HTTP methods like get post put and delete right if you convert them into other way you this becomes part of your crud operations right like create read update and delete so that's the current operations basically maps to http methods which are get post put and delete we saw the example of get right and just this is just a beginning kind of way to make you give a heads up and warm you up with the syntax and the code that will write but we saw this example and in the next episode we will cover about in detail about get post put and delete we'll also see how to pass query params Etc I hope you are enjoying this series as much as I am enjoying bringing it to you if you like this video please do subscribe to my channel hit the like button if you have any queries or doubts write to me at surya.arathi gmail.com thank you so much for joining we'll continue this series I'll see you in the next part welcome back to Arc tutorials and this is axios tutorial series and we'll be covering this complete tutorial Series in three parts I covered the first part and today is the second episode in the first part we learned about the installation how we can use it as a standalone individual Pages or I also showed you how to use it in Express and node.js the way to write code is same even in react okay the only difference that will be is how you import it okay so basically when you are learning this series you can use it in either ways either in react in angular applications in react or in node.js or in standalone we also touch based about the basic get method but today we will be writing all the methods in detail we will see how what are the different variations and much much more this is live coding so let's get started all right so first we'll learn how to write a async code right if you open the code that we wrote last time we wrote a method and we have declared the name of the function and we wrote some code calling axios.get right so today we'll be learning first things first if you want to use async method you just have to make the method as async whichever contains the axios code so you can write a async method or you can write a normal regular method same thing with your if you see the express.js code what you will do is in front of here you will write the async function okay that's how you can make any function as async which contains your axios code okay that's the simplest thing I can tell you all right so now let's talk about today's important things which is the get post and put and delete okay so I'm going to give you a syntax to make it easy and that remember that and you will be able to master axios in no time okay but before that let's talk about the HTTP methods that are there right so you got get post put delete right you have other things like options which tells you what are the different HTTP methods supported and you also have head okay which is basically the Header information but we use these four for HTTP operations okay get means get the data okay from server API API you can say post means create a new resource right create a new resource using API put okay now there is put what does put do what will update a resource update existing resource okay or if not found it will create one okay so if a resource particular ID is found to update it will update it if not it will go ahead and create one delete as the name says will be used to delete the resource okay there is one more thing called patch so what does patch do unlike put right put will replace if it found something it will entirely replace it whereas patch will only optionally update the fields optionally update the existing resource okay so let's say you don't want to update the entire resource right so you can only update one or two Fields using patch okay patch will update optional Fields using existing resources all right so those are all about HTTP methods and these are all supported by axios okay now let's talk about the general syntax right and how you will write any axios code so for any access code the syntax is here you will give the method name okay here axios dot so for example if you want to write a post you will write axios.post if you want to write a get you write dot get okay that is axios dot method name now remember if it is a for it is a get URL right now let's talk in general so here I'm going to write if it is a get call then URL is mandatory okay that means you are telling which URL to get the data from and if it's a post you need to pass URL as well as data okay same thing for put you'll have to pass URL and data and axios Dot delete here you'll pass a URL okay now this is a general syntax that you can use at choose methods HTTP methods now you might want to add some params right so you can pass that in optional fields okay you can pass optional Fields here these are optional where you can send headers you can send params query patterns Etc okay so remember this syntax okay because this is what we will be using in today's episode and we will just write the same thing okay I hope you are now clear with the HTTP methods as well as the axios syntax okay now that being said let's go ahead and start writing our code I'm using the express server code but like I said the code is exactly same no matter which whether you use it in react whether you use it in Express whether you use it as a standalone okay remember that because you don't you might think that oh it will be different the only difference will be in this how you import it in react probably you will be writing import actions from Max use okay that's the only difference in react and express all right so that being said you can see here axios dot get and we have a URL and then and catch right so we are using this URL to call now I'm going to rewrite this into a different method and show you with params okay so now we made it async also if you see here I added the keyword async in front of it now let's go ahead and I will rewrite this get with the different with params now this is one way this is another way copy the URL again okay so now notice that here I am passing the ID as 5 here I'm not passing okay here instead what I'll do I'll pass it using params so here I can write params and then it will be an object I'm going to say my param name is ID and I'm passing 5 okay and then we'll do Dot function response and then same we'll write Dot catch for any error action e okay done okay so let's console log this response and let's console lock the error if any okay all right that's it and now um we can start our Express server so this is how I'm starting Express server but you would have something similar in react where we run npm so I'm loading localhost 3000 which is getting data and printing the value you see here it made a request because we are not sending anything to the back to URL or I can say response dot send and send the response dot data okay now let's see right now if I refresh I am getting the user ID 1 iD is 5 that is important because we passed it as a param now see that's the difference okay this is one way like you can send directly called the URL to get the data the other way is you can send it through params okay now I'm going to modify this little bit more right now if you see the value is static right but in your applications this will always be dynamic so we are going to read that value from the UI so I'm going to say ID well equal to request Dot query dot ID so what I'm going to do in the query param so I'm going to send ID read that value and I'm going to pass this value as the latest value now let's see it's even more Dynamic now now here I have to pass query param as ID and I'm going to pass 10. so see now it is ID is equal to 10 some value I can pass any number of value it's not there in that system but right 6 it's giving Dynamic value now so see the same get call is now Dynamic okay and the difference we learned now is using params okay that's what we learned as part of axios dot get I hope axios dot get is clear all you have to do is exos.get followed by the URL dot then and Dot catch it will catch any errors if there are any okay and we can also pass params this is another way now let's go ahead and learn how to write axios dot post excuse dot post and I told you it will be the same so see it will have a method and it will have param okay and let's go ahead and check the Json placeholder Json Place holder open this okay and this is the URL like let's check the documentation for for post okay so here it is all HTTP methods are supported and we are going to use a post so slash post when we call it will create a new resource like Shields okay okay let's quickly open up the documentation to get the syntax so post request just post and followed by the data okay same way just what we did now okay so I'm going to use this slash post URL and axios dot post followed by the URL followed by the data options okay so that's the thing that we decided here um okay so this data okay now I'm going to go here copy this URL till that to do's or I'm going to instead of to Do's let's call it posts that we are going to post it here and in the data what are we sending uh I don't know what it's expecting but let's see the fields that it has so title and body okay so we need a title and we need a body so I'm referring to the a documentation for the reason being that it's a public API so we need to follow certain process in order to uh match the fields okay but if you have your own API you will know which Fields you're working with this is test body okay so what I've done axios dot post the URL and Then followed by the data remember that the data format should be in an object okay otherwise it will give you an error all right so and then again we'll do the same dot then response and Dot catch let's bit here that's it we need and that's all we need right now so let's go ahead and fill this and run again so I'm going to load it in this and let's see it says error let's headers already sent okay so whenever you do any such things you should not be sending any response so I'll comment of this line and instead log it before you print any data you should not send the headers request otherwise it would not work all right okay so now you see it didn't get first and it did not come inside the post and it did send the response dot data so see here it created a new resource by the ID 101 okay and this is the test body and this is our title okay so basically we posted the data and we got the result okay one other way to check if you want to really work with this you can also check with Postman tool and see how it works okay that's for your knowledge but this is how it works let me show you network call just in case if you don't believe the code all right so I'm going to refresh it here so but you won't be able to see that the reason being that this is only our response that we are getting see here 101 this is test body and our title okay so that is post now same way we can do axios dot put and what you will do same exactly same no change but now the URL will be different let's check what's the for put it is post slash the ID okay so copy this posts okay now you can do you can send all the details in one go you can say ID is one and then you can say title and body this is our updated title updated body okay so I am going to send the response here with DOT then and function response so if you see this dot then and Dot catch remains same right yeah that's the beauty of it in fact the entire code mostly will look similar to you in axios and that's the most easiest way to build console.log error okay all right I'm closed it here perfect okay so this is good I'm going to comment this off else we'll get the error so now it will make put request to this URL and what is the ID it's one okay so let's go ahead and try that out VM Run start and let's when I refresh this screen now it should give me the value if unless okay so it has updated completed is false id6 because that was created okay something failed let's check what failed 404 not found okay so I think let's check the URL so for put it is post slash ID okay so I'm going to pass the ID here instead of there let's see again this is because it's a public API that we are using so we need to be extremely careful of um and we have to basically depend but it's a free one so if you see now it reloaded with with id1 it has got the updated body and updated title okay we can again parameterize this if you wanted a dynamic one you can just do ID and pass ID well like this and now I can even make it work with six right so whatever value you get it will be completed okay because here we are capturing ID Val request query ID and post slash 6 and response dot send okay so we can see here now okay so it came the updated body is still one because we did not reload that okay all right so now if you see here ID is five and our updated title now same way if I want to pass something else it will update that particular ID okay we are passing the dynamic ID here and we are passing the body content for put okay so that is get post and put okay now the if you see mostly the axio syntax it remains same here you'll just tell the URL that you want to delete okay now same thing let's check the delete option so delete post slash one so post slash 1 would just delete the resource and we'll send the response back and say that it's deleted I'm going to say here data successfully I'm going to comment this line okay so see here data deleted successfully because it went inside axios dot delete it called the URL then this this and Dot catch if any errors okay so basically the syntax if you see is same axios dot put the put the method name okay okay this looks like slightly just remove this data it's little confusing okay so here the syntax is similar X use dot method name okay it can be a get post put or delete okay and then followed by URL is mandatory right URL is mandatory followed by parameters if any inside this the only errors you will make the common mistakes that you will make is by not sending these in object okay sometimes you'll directly write here 10 or something like that but for with params it has to be inside an object okay and that's about it anything that you send should be in a object okay all right that's all axios has to offer basically with respect to http post example we saw and put example we saw right and we did get and delete okay I'll continue this series um and in the next episode we will learn about interceptors we will learn about error handling we will learn how to do concurrent request multiple Methods at the same time and that will conclude this particular series I hope you are learning about axios this is a complete tutorial series don't forget to ask me your doubts in the the comment section below I'll be more than happy to help you thank you so much for joining see you in the next episode to Arc tutorials this is axio's complete tutorial series this is a part 3 of the series and the last part in the first part we learned about the installation we learned about the different features we learned about some of the methods supported by axios and we did a basic example with get post in the second part we did detailed coding for all the HTTP methods available and their usage and how to make requests and how to process the responses today we will dig the Deep dive into different configuration options which are available to us like headers with credentials auth Etc also we will learn about interceptors very important concept of how do you set a particular Interceptor how do you modify request response Etc finally we'll close this series with error handling and making it elegant all right so that being said let's get started with our coding today we have a lot of a lot to code all right so the first example I am going to show you is with headers right and this the same thing applies to all the HTTP methods that we'll work with for this particular series we are using the Json placeholder free apis these are the restful apis for testing learning and all that we'll be using these apis all right so that being said let's get started I'm going to use this module for today's coding let me get rid of this line all right so you can again this code remains same if you are in react you will probably be doing import axios from axios okay if you are a node.js or Express you will do require axios like this okay reusing require statement in react you will write import if you are doing it in a normal Standalone with CDN you don't have to do anything just start using axios all right so that is the basics that you should know if you are not clear about that please refer to the previous parts all right let's continue the first thing we are learning is to headers with axios okay all right so I'm going to create a new and let's say get okay again you can use any method for that matter can be get post put whatever you would like to use and use one of these um URLs that we have already used right Json type code this is the URL for that Json placeholder that we have seen so I'm going to use that and I'm saying get the to-do's right or from that URL so that's the URL and then you can pass params okay and you can pass the details of the configuration this is a config config means you can pass different items to it like you can pass headers okay and it's an object that you will have to pass so here you can say content type you can see here application slash Json or whatever headers you want to pass right so that's the syntax you'll use axios dot method name followed by the data if you are using post let me show you with post because that's little tricky so you'll use post and then you would have the data body like this and you would pass either object that a key Fields learning post with headers body width post headers okay so that's the only difference in get and post input you would have this extra data that you will have to pass for post and put forget and delete you don't have to you just have to pass the URL so here I have modified I have created a simple instance of axios and then I'm going to write dot then and then function it will give me a response then dot catch and here I'll capture the rest error if any and I will lock the response and I will log the error okay simplest code possible to inject a header so see this is how you add header to any axios request okay remember the rule if it's a guest you won't have the data okay if it's post you would have that okay so this is the simplest thing that we can do and once we are done and then I can finally right or you can just say once it is done you can send a response and express and say posted data with headers okay the headers can be anything that you want application slash Json text PDF whatever you would like all right I'll go to localhost and load that URL so it says posted data with headers that's correct and it has posted and created a new resource by the ID 201 okay and that's how you can see uh the details of what was sent and whether it created a particular request or not okay that's that's pretty much if you see here in the headers right now you have the request header which says content type application slash Json okay so that that that's how you can inject any headers that you want in any of the axios okay so this is an example of headers okay so now next I'm going to show you the details of some other options like say you want to add um with credentials right if you are in a network which does not allow you to make a single sign-on or proxy request errors or something you can add with credentials you can also add auth and here you will pass username say testing and you can pass password and say testing right so you can pass different configurations here like header with credentials auth Etc okay not only just headers but inside this body object which is a this is axios config right options so you can pass all these options different you can do a set timeout you can set base URL and lot of other things okay important things are header with credentials and auth all right that's all about the config options for you with the headers okay let's go ahead and I'll comment this so that we can work on others and next I'm going to show you is concurrent requests okay now what is a concurrent request concurrent request means let's say you have multiple apis to call and get data from okay you have let's say promise to and promise three okay you have three apis that you need to make okay let's copy the URL again so now see the difference I want all the three to be combined okay that's that's my requirement my requirement is I should make three API calls one to two rules one two users get the first to do get the first and then get the first um what else is there posts okay get one data from all the three apis okay so now since we learned about headers I'm going to pass it and I'm going to type accept and coding okay that's one of the things that will accept you have different options like deflate and compress for that okay now you can copy the same and add it to all the others okay so see I'm adding now headers to the API calls okay so basically I have three API calls one for users one for to Do's one for posts now my requirement is I should get the data from all the three simultaneously and then combine the data that's my requirement what it me also means these are called concurrent requests right so for that we'll use something called Promise in JavaScript right we have promise promise dot all right that's what we are going to use from Mr doll if you see the documentation it says it takes a array so promise one promise 2. and promise 3. I'm telling it that resolve right resolve all the three and then if there is any error catch it okay perfect all right so once you get what you should do so if you see I'm going to build an object out of it I'm going to say combined data is equal to and I'm going to say posts data and here I'm going to say results of 0 it's an array right so results of 0 is post data first one is to lose okay so first one is to lose data second is users data third is post data and here it will become 0 1 and 2. okay this is results that we get is an array okay and it will have three values once all the three are resolved we will get a combined data and I'm going to do a console log of the combined data okay and remember the output that we get is dot data is where the data will be if you don't add data it would give all the request response headers all those details which we don't want we only want the actual data so I'm doing that and now I'm putting a error console all right now I've started now when I run this application probably we can do a Dot finally and and we can put here and say response dot send con current request completed okay so this is a simple thing that we can run all right so we have three apis the calls are going to three different apis if you see here to Do's users and post I have created a promise and we are using promise.all to resolve all the three promises if they are resolved put them in console log and combine value if not through an error and finally send a request to the API I'm going to run this it says concurrent request completed and if you see the log you see the post data you see the user's data and you see the to Do's data okay so there you go you have all the details that are coming out okay so that is the concurrent requests of how you can handle with axios okay the next and important thing is what we are going to learn is let's learn interceptors and then I'll come to the error part okay so what are interceptors interceptors are beautiful mechanism that you can modify right you can modify update your request or response okay there are two types of interceptors request interceptors and there is response interceptors okay now request response interceptors means if you want to modify or update your request before it is made before it is called okay you want to add some headers you want to check some details you want to inject some secret tokens Etc you can do that by interceptors it will do before it is called before API is called okay before the end point is called response interceptors means when you receive right when you receive the response you can do the modification update processing transform anything that we want to do with the response those are called interceptors okay now let's see how we can do that so we need to move this code to the top why that means before we make the call right so that's why we should Define it at the top somewhere here okay before you even make the API calls so Interceptor should be the first thing you will Define in your code all right so how do you define it you'll write axios Dot interceptors dot which type request or response then use and then you define c here it says Interceptor route Handler right so this is where you will write the basic code which would get you the details okay now let's go ahead and Implement that so for that we are going to do simple I'm going to root write a request when request comes I'm using es6 short hand annotation but this explains um this will open up just like any other ah just like any other method that you will have okay same way you will finally have error Handler see so you can say okay so this is request and this is error now what I want to do is let's say I want to add few headers before I make any API call so I'm going to say request dot headers right now here are what I'm doing request dot headers and then I use I'm saying that I want to add a new header and I want to call it start time and I'm going to give new data I'm also going to inject a secret okay secret key give some let's say this is my secret key okay once you have done all the modifications you need to return that request okay in the error same thing if you find anything it's a promise right axios is a promise based thing so you if there is an error you just reject it with a message or something and you can also give a custom message and say unable to make request okay and return this that's it so this is how you use a Interceptor that means you will write axios dot interceptors dot request if it is a request if it is a response I'll show you in just a bit but first let's test this out okay that's it PM rods go here okay so it's done it made our call but okay so now let's see the data that we get okay check for headers we need to check for headers okay so if you see this header now you see these two entries in the header start time and secret key this is the what we have added in our ins in interceptors right that means before you make a request add these two to the header okay so that's how you add interceptors for request same thing you can add for interceptors dot response dot use okay now this is where you will Define what I should do with the response right again you want to handle something you want to add a new ID value some anything let's say count or anything so you can just modify it here you can say response then there is a error okay and then you have this and in the response I am going to say response Dot headers I'm going to say um organization verified equal to true so again it can be any it can basically be anything and everything that you want to add just make sure that you return that particular response and same way you can handle the promise dot reject and you will throw some unable to process response and return that right so this is how all your responses now will have a header called organization verified okay let's see how it works okay now it's completed if you see the response headers now and it's not just headers basically you can do anything and everything here okay so make sure that you don't get confused with that so this is our request header if you see the request object and in the response you can see verified let's check the response headers content start authorization start key okay let's check one second let's check that entire at the start headers you have organization let's check if we find that so you see here organization verified is true set to true as part of the response headers right so that's how basically you can do with anything if you want to change data right you can do that you um in your response if you want to add something to the data you can say response.data and if you want to edit a particular title of it you can empty it you can do a lot of things okay the idea is know about the syntax and how to use it so this is how you will use axios.interceptor.request.use and here you will use axios interceptors dotresponse dot use okay it's the same code for react node.js Express or Standalone don't get confused with that okay all right so that was interceptors and the last thing in the tutorial that I want to cover is the example with errors okay A lot of times you will get errors from API how do you handle them elegantly is one of the key things okay like you just can't say that something went wrong you have to be specific about whether it is the client side error whether it is a server side error Etc okay so what we are going to do is make it elegant like we can write responses differently let's see that now that is applicable to all the methods so inside the catch statement so far we have been just writing like this console.log e okay but instead you can make it more elegant okay how I'll show you and this is the same for all the methods so don't get confused okay all right so once we do catch then the first thing you will do is if e dot response what this means is that we made a API call okay we got response from server now this is important because sometimes if you make a request in the URL or anything it won't even come inside here because there is no response from server you made a wrong call okay so that's why or we have to check if e Dot request that means while making a request do we have any error okay so first you handle the response then you handle the request for everything else you can put a else okay and here you can say console.log something bad happened we don't know it can be anything it can be for any various reasons okay this could be a setup or anything of those those sorts okay but if you want to be again more specific you can just mention the E Dot message that's the message that we got okay now let's handle the response now we know that from server from server when we get error it's usually 500 errors okay 5xx that means usually it will be in 501 504 Etc anything which starts with 500 is a server error so you know that there was a response and you can check the status of it okay you can lock this you can lock the status and say e dot status it will give you this number whatever number 50150 500 Etc you can also check what message you got from there so you can say e dot data will give you the exact message that you got from the server and finally you can also verify whether if it was something wrong with headers so you can take these three values and put it or you can verify and show it more elegantly if status is 500 you can show a four of maybe a beautiful image or message if something message is there you can change the message Etc okay so those are important from response point of view okay I'll show you a quick example if you say e dot status is equal to equal to 500 then I'm going to change my message right so I'm going to say console.log or send message whatever and we will say uh server is not available right now this is a message I want to show instead of saying that server unavailable okay so see this is one of the classic examples that when something goes down in your server how do you beautifully and elegantly handle it same thing now let's say you did not make a request response that means it failed even before you make a request how do you handle that so that's where you would check that while making an error itself you got something wrong so I'm going to say e Dot request and Soul Dot Lock I think it's data again let's check okay all right so this is how you can elegantly handle with this piece of code you can apply to any HTTP method get post put delete anything that you want okay so this this is how you should write a common catch code and call it everywhere okay so you can just make it into a method and call it everywhere else okay so that you have a unique error handling response you don't have to write it again and again so copy that code make it a standard error messaging system that will work right I hope it's clear and before I leave you I'll demo this one piece and then I'm going to make a mistake in this particular code what I'm going to do is I'm going to screw up this URL so we were making a request even before we get a response so we are talking about this code block now line number 67 and 68. okay because since we gave a wrong URL it won't even have any response right and that's why we will see this one let's see okay so something bad happened undefined right it came here okay so like that you can check which data you have and how you can manipulate that okay so it is saying three or four okay so that is the error we are getting okay now that's exactly what we want something bad happened unable to process response okay so that's how it is giving okay so basically you can customize that error messaging however we want in terms of uh that the data that you're seeing is because of this okay console log so don't get confused with that the data you might be seeing so you might think it's working it's not actually okay see here something bad happened unable to process and its status is 304 okay it doesn't know what to do got it so that's all about error handling that you should know about axios like I said write a common method for all these and just call it every mayor wherever you are making a request with any method get post put or delete all right that completes this part I hope I have covered all the details that you want I covered headers config options I covered concurrent requests I have covered errors example I've covered interceptors and that's all that you need to know and learn about axios that I hope at the end of this series you are also confident and you will be able to make use of axios in your applications if you have any doubts please reach out to me at surya.aradhya gmail.com I always love to hear from all of you also please if you have any doubts you can reach out to me in comment section I have authored a JavaScript book which will help you so you can check that out at r tutorials.comroad.com Please Subscribe share with share these videos with your friends and colleagues and like them if you like my work thank you so much for joining I hope you enjoy and learn axios happy learning thank you

Channel: ARCTutorials

Views: 4,768

Keywords: axios tutorial, axios tutorial react, axios tutorial 2022, axios tutorial js, axios tutorial in react js, axios tutorial post, axios in react js, axios javascript, Axios post, axios js, axios react tutorial, axios get data from api react, axios get with params react, axios get post put delete react, axios get request with body, axios guide, axios get api, axios get and post request, axios post, axios put, axios get tutorial, axios post tutorial, axios put tutorial

Id: KEvXT_fx4mk

Length: 60min 46sec (3646 seconds)

Published: Wed Jan 04 2023