Mastering API Integration in React with Axios | Integrate your Application with Backend

1. Course Introduction: Welcome to the courses wherein we are going to master API integration in react. My name is Fassel and I'm thrilled to guide you through the exciting world of API integration into the world of react. I'm an entrepreneur with passion for teaching online, and in my career, I have built a lot of robust applications that have been used by millions of users across the globe, and I'm here to share my experience and knowledge with you all. In today's dynamic world, API integration is one of an important aspects when it comes to building production grade scalable application. Every web application that you see has a front end and a back end, and if you're building front end, it's crucial that you understand how you can integrate your application and communicate with the backend server. Throughout our journey, we will dive deep into API integration with react. We'll make use of axis for the same. Talking about the course, this course covers a lot of aspects of API integration and making API calls. For example, whenever you're making an API call, it's likely that you won't get an immediate response. So how can you manage the loading so that you have improved user experience and how can you manage error states. We will also simplify the process of making API calls, and we'll see how it can be done and achieved with axis. We'll also understand how you can make concurrent EPI calls using axis. We also have a scenario wherein we'll be covering different kinds of EPI requests like get request, post request, we'll be enhancing the security by making use of interceptor. So all these features is all these things is what we'll be covering into this particular course. And by the end of this course, I can guarantee that you will have skills wherein you would be able to integrate any sort of EPI into your react application confidently without any help. And this would open endless possibilities for you into the world of web development. Who is this course for? So this course is perfect for anyone who is looking to elevate their react development skills. So whether you are a fresher, an experienced developer or an intermediate developer or whether you are someone who is just exploring how EPIs can be integrated into front end applications, then this course would be perfect for you all. So with that set, are you ready to transform the way you handle APIs into your web application that are built using react? I'm super excited to take you through this course, and I'll see you on the other side. 2. Setting up React Project: Hey, there. So now it's time that we begin creating our react application, and we're going to do this with the help of the command line. So first thing first, what I'm going to do is I'm going to head over or navigate via the command line into the project folder. Now what I mean by project folder is it's a folder of my choice where I wish to have my react projects organized, okay? So what you can do is you can head over to the Finder. Like if you're on Mac, you can head over to Finder or if you are on Windows like me, you can head over to Explorer, right, and create a folder in the location of your choice, you can call the folder, whatever you want to. I would name it react. And then from the command line, you can just navigate to the location where you have created the folder. So I've created this react folder here at this particular location, and CD is the command, which is change directory, and it is helping me navigate or head over to this particular folder or to be in this folder from Command line. So now I'm in this particular folder, I'll clear everything else. All right. Now in this particular folder, I'm going to begin creating my react application. And for this, I'm going to make use of NPX, okay? Oops. So I have already created a few react applications before. So you can see this suggestion over here, okay, but there's nothing I can do about the suggestion. Okay? But ignore this suggestion for now because what this particular uh terminal does is whatever it sees in your history, it just keeps suggesting you, which is good. Showing you the entire command, that's completely fine. So NPX I'm going to make use of NPX. Okay? Now, NPX's a syntax right, it's used to execute the node packages, or it is used to execute the packages. And then we are going to make use of Create react app. All right. Now what is Create react app. Create React app is sort of a tool which helps you create the entire react application. Now, why are we making use of this? Because, you know, the react project has to be organized in a certain way. Like, it needs to have the SRC folder. It needs to have some files. And all of this come together and they enable you or they enable your application to work in a seamless way, right? So you can go and manually create those files as well. But this is a tool that enables you to create the to create or set up the application structure in the right way. Okay? And after this, I'm going to just mention my application name, so I can call it MyRact app, something like this. Okay. And what I can do is I can simply press Enter. The moment I press Enter, what this is going to do is it is going to create a folder in this particular location. So in this particular location, it is going to create this folder. Why is it creating a folder in this location? Because I've navigated to this folder from the terminal, and this will be the folder name under which all the files of my react project will exist. Okay? So you can press Enter, and you should see some sort of processing happening. So you can see creating a new react app in this particular location. It is installing some packages, and this might take a couple of minutes. So it is installing. It is also telling you what it's installing. It's installing react, react Dom, react scripts, and everything, everything it needs. So we'll wait for a while until this entire process is complete and we see a confirmation. So I have got the confirmation, and I also got a minor message. Okay. So by the time I started recording this video, there's a new minor version, it says of NPM that is available, and it's asking me if I can upgrade. Okay, so I'll upgrade later. You might not see this, okay, but I'll just ignore this for now. It's just a upgrade notification. You can see the confirmation over here, happy hacking. Alright. And if you scroll up over here, you'll see the entire process of what happened. So we executed this command here. Oops. Let me scroll up. So we executed this command over here. Okay, if you come over here, you can see it added so many packages. It took 36 seconds. If you come here, okay, it has said success created this particular application at this location and inside that directory. So you need to navigate to this directory, and inside this, you can run all these commands over here. Okay? Now, once you navigate it has given you ready made commands like NPN start, it will start at development server. So the react application that you've created comes with an embedded inbllt server. You can run you can run this command to bundle the application and into static files, basically for production deployment, this will start the test runner in case you want to run test cases, NPM run eject. Okay, this is something that you can run. So the suggestion is, you can start by executing this over here. I'll copy this. Okay? I'll paste it over here. I'll head over to this directory, o, and then it is telling you NPM start. Now, this is a command using which you can start a development server onto your local machine. So I can run this command as well, okay? And you could see the application up and running. So this is the application, okay? You can see the browser automatically opened, and you can see, this is the application that is up and running. Now, this is a server which is showing you your content or if it is executing your react application into the browser. Now, any change you make into the files, you'll see live reloads happening over here. All right? Now, you can see the message over here, like you need to edit this particular file and save to reload. Okay? So this interface is coming in from this particular file is what it says. And if you click over here, this is the link to the official website of react. That is what it has linked to. Okay? So you can go to that website and check out or read some stuff as well. All right. But a few things I would like to mention over here is once you have started the development server, you can stop it by pressing Control and C on Windows or Command and C on Mac. Okay? I'm on Windows, so I press Control C, and you can see it terminated this particular job. And here now come if you try to refresh, this is not going to work. Okay, because the server is down, right? Now, in order to get your server up and running, you need to run NBM start within this particular folder. Okay? Only then your server will be up. So while development while doing development, you can keep the server on and actually modify the files and save and see the changes happening live. Okay? Now, I will chalk a bit more about this command. So we created the react app or the entire application using this particular command. Now you can also add options over here in the end. Okay? So what you can do is you can make use of templates over here. Okay? Now, let's say when you're working with react, you also want to make use of typescript. Okay? So if you're making use of typescript, you can add something like this. You can say template over here, and you can say type script. Not going to run this, but this is just an extra information. What this will do is it will make use of the typescript template to create your application, and it will add the typescript support right from the start, which is helpful if you're working on a larger project that can benefit from strict type checking. All right. So you can make use of this command in this way, all right. I hope this command is clear. NPX create react tap. So we don't have the server open running, but you can now restart the server again by saying NPM run NPM start. I'm sorry. So it's NPM start, something like this. And if you start it, it will again start the server. All right. So I hope this is useful and I hope you have been able to follow along. 3. Setting up our IDE - Visual Studio Code: This is our first react Based application, which we created, okay? Or I should say we did not create. Okay. So this is automatically generated project using Create React app. Okay, and it's also giving us some hint over here. You can edit app dot qs and save to reload. Okay? It has a link to learn react, which will take you to the official website of react. All right, so far so good. So this is our application up and running. Now what do we need to do? We need to start coding and modifying things. And what are we going to do for that? We are going to install an IDE which is the ID Visual Studio code. Okay. So this is what it looks like. If you already have it on the computer well and good, if you don't, then head over to this official website. It is a free tool. It's free, built on open source, runs everywhere. Since I'm on Windows, it's prompting me to download a stable built for Windows. You can switch to whichever operating system you need to. But if your operating system has an installer over here, it is going to automatically. So if you're logging in from Mac over here, it is going to show you download from Mac. Okay? So whichever platform you're opening this from, it is going to show you that button and you can go through this if you're not aware of what visual studio code is. But just download and just install it like any other software program. I have it already installed, so I won't be showing you the installation steps, but installation steps are not at all complex. It's very simple and straightforward. 4. First Steps: Now, once you have successfully installed Visual Studio code, you would see a page like this. So if you open Visual Studio code, for the first time, you'll see this Welcome page. Now, I have been a visual studio code user for a while, okay? And you are seeing all these recent projects. So it's likely that you won't see these list of recent projects unless and until you are a user. Okay? But since I'm a user, like I said, I'm seeing the list of recent projects which I have used or created in the past. Also, you'll see these options over here, new file, open file, open folder, clone Git repository, connect to all of this. It's a very useful tool. Visual Studio code, I use it all the time. Now to open the project, you know the folder, where you have created the project. So you can just click over here, Open folder and you can navigate to the folder location where you have created the project. Alternatively, if for some reason you are not seeing this, you can go to file from the menu options here and you can see open folder. Both are the same. So what I will do is I'll select OpenFolder, I'll navigate to the directory of my choice, and I'll open the project over here. Now when I selected Open folder, I saw this folder window, which is exploer navigate it to the folder where I've created the react app. And I'll select this particular folder. This is my react app project that we have created. Inside, you'll see a few files, but you need to select the root folder. I'll say select, and it will open this particular folder for me. Now I can close this welcome page over here, okay? So you can see the project over here on the left hand side, okay? You can see this entire folder. If you expand this, you'll see the files within. Okay? So when you executed the command called Create React app, okay with Create React app, it created all of this for you. You can manually create it as well. But as you can imagine, this is going to be very tedious, right? So that particular tool, Create React app does the job for you, wherein it sets up the entire project structure for you. Okay? We'll go through this project structure soon, but for now, what I would also like to explain is we have the server up and running from the terminal. Now, what I can do is I don't need to make use of an external terminal. Visual Studio code has a way wherein I can actually have a terminal within Visual Studio code. This way, I never have to leave Visual Studio code and switch to a local terminal. Here at the top in the options, I will see terminal over here. You can say new terminal, and you can see this is an integrated terminal inside Visual Studio code. And if you say PWD, which is present working directory, the terminal is automatically opened in the folder which you have opened inside Visual Studio code, which is the project folder. So you don't need to navigate also, you don't need to run command, CD, and all and navigate, this just works like a local terminal. So here, I can say NPM start over here. The moment I say, I'll get an error, you can see, something is already running on port 3,000. And what is running, our application itself is running, and it is asking us whether you want to run the app on another port instead. I don't want to do that. I'll say no. Okay, and it will just stop the execution. Okay? But what I'll do is I'll for shut this server because I no longer want to make use of an external, you know, external terminal over here. Okay? I want to stick to the visual studio code provided terminal, and I'll NPN start, and this should now run the development server for you. Okay? So this way, what we can do is I'll move this to a new Window. So here we are in the new window, and I have Visual Studio code running in the new window. So this way, I don't have to leave Visual Studio code ever. I can even minimize this over here like this. Okay? I can even create new terminal from here, so you can see plus, and you can have multiple terminals running over here. Okay? It's very useful, and this is the reason why. So these kind of tools that Visual Studio code provides, that is the reason why it's loved so much in the developer community. Now, I'll also show you the list of extensions that I have. So here, if you go to this extension tab on the left hand side, here you have some options like search, you have source control, run and debark all of this, okay? I'm making use of Docker also in some of my projects, so you can see Docker over here as well. But you might not see this. Okay? This needs a separate extension. Okay? But if you go to extension, now what are extensions? So extensions enable you to enhance or extend the default functionality that Visual Studio code already provides. So you can see, I have extension for Jupiter notebook. Okay. Whenever I'm coding in Python, and if I want notebook support, I make use of this extension. Okay. So I have this extension. This is not needed for react. I have Python extension. Okay? Now, this auto rename tag, this could be helpful for react because, you know, if you are renaming a tag, okay, and if there is a closing tag, what this will do is it is going to rename paid the paid version of that particular tag. Okay, so this is something that you can have. It's helpful. For example, if I have to give you an example, let me give you an example. So let's say if I create or let me open some file over here. Okay, let me open an HTML file. Now, this thing over here, you can see, let me go over here, scroll down. So this title has an opening tag and a closing tag. So because of that particular extension, if I rename the opening tag, you can see the closing tag is also being renamed. Okay? So that is the benefit of this auto renamed tag. You don't have to rename the opening tag first and then rename the closing tag, right? Be pair colorization, as you can make out from the icon itself, it is used to it color highlights the closing pair of the bracket. This is useful if you're making use of a lot of brackets in your Okay, Debugger for Java, dev containers, jango doco all of this are used for other languages, extension pack for Java, gradle for Java and Italicde. Okay? This is for AI assisted development. This is also for this is Intelicode API usage examples. Okay. I have some for Python. So these are all Python related, I'll scroll down, a live server. We don't need this Maven for Java. This also is not needed. Prettier is something that you can use. This formats the code. It organizes the code for you. Okay. And yeah, this is what we have Okay. I will also add some extensions right now over here. Okay? So what you can do is you can search for react code snippets over here, something like this. Okay. Okay, so you can search for ES seven plus react, something like this. And you'll see this extension with almost millions of installs. So this is 12.9 million as I'm recording this video. Of course, this will keep on increasing and you might see a different number when you're watching this. So this is extension. This is the name ES seven plus react redux react Native snippets. Now, what this does is it gives you templates, okay? Like, for example, if you want to create a function, so you can say RAFC. You can just type in that and it will give you the entire function definition. Okay. So these kind of shortcuts it has, which helps you save time. So you can install this. I'll just click on Install and add to my list of extensions. Okay? So yeah, we have it installed now, okay? You can explore more react plugins or extensions in the marketplace over here and you can play around with it. And you can enhance the default functionality that Visual Studio code already provides to you. All right. So yeah, that's about setting up Visual Studio code, and I hope you found it useful. 5. Seamlessly Integrating APIs in React: So now it's time that we begin talking about how can you work with EPIs in your react application? Now, APIs, like you know, EPI stand for application programming interface, and it's a way for a remote server or back end to expose the set of functionality to the client. Okay? And you might have a react application in the front end that might want to consume those services that are being exposed by the backend server. Right? And today, if you're building any sort of application, making use of EPIs is really, really common, okay? I can't imagine a production grade application not consuming EPIs. Okay, APIs are very common these days. And if you're looking to become a serious developer, it's important that you understand how you can make use of EPIs in the right way into your react application. So that's what we are going to cover a in a hands on way, okay? So what we're going to do is I already have this react application, which I've created using VT and I have app GSX file where I'm going to write all my code. It's a component file, which is being rendered in Minix over here. You can see it's being rendered over here. All right? Now, first thing to work with APIs, you need a set of ABIs, okay? And luckily, we have a set of free fake APIs over here. Okay, that can be used for testing and prototyping. So I'm going to make use of this website called snplaceholder.typod.com. All right. And how to come over here, you can directly type the URL in the browser or you can search for GCN Placeholder on Google and you'll see this cn placeholder typicod.com. All right. So coming to this website, you'll see that it provides free fake, reliable EPS for testing, okay? It lists the sponsors over here. Okay, and it gives you a gist of how you can use it over here. Okay? So you can see over here. This is the endpoint that it's providing. Okay? Yeah, it's a two to endpoint, and you can trigger it over here. You'll see the S and response. Okay? You can see over here. So you have user ID, ID, title, and completed over here being displayed. Okay? And you can hit the API. Okay. Let me like amount of it, you can hit the API this way using the fetch method in JavaScript. Now fetching JavaScript, it's not a react concept, but it's JavaScript related content, sorry, JavaScript concept. And since react is based on JavaScript, you can make use of fetch in your code. If you run this script, what this is doing is fetch is basically returning a promise, and then we're making use of then these are laddered then over here. So then waits for this to finish. Then you get the response over here and this is executed. So what is happening is the response is taken into consideration over here and converted into JSN and then after this process is complete, you have the JCN being locked onto the console. Okay? If you run this script, you'll see this is what the outputs you get, right? It's browser built. It allows you to run over here. And there are lots of endpoints that it provides. Okay, you can see slash Post. I'll provide you with 100 post, so you can go over here. You can see 100 posts it is providing you with. So if you want a lot of data, you can query this comments, albums, photos, it'll provide you with 5,000 photos, todos, users and all. Okay? So yeah, these APIs you can make use of. There are tons of things. If you want to make get request, these are ten points. If you want to make post request, there are a couple of endpoints over here. Patch requests, delete request as well. Now, if you're aware of EPIs and how they work, you will be aware that EPIs are of different types like get, post, put, patch, delete, right? So, yeah, that's about this JCN type holder. Sorry, JCNPlaceHlder. All right. What you can do is we'll be making use of this over here. Okay? So coming to our application here, I have a very simple component setup. Okay? It's just returning a simple Jex, which is just having the header. Okay? So what we will do is, we will get this data. Okay, so I'll just copy this over here. Okay, straightaway. And I will straightaway pace this over here into my component, but I won't paste it directly. Okay. I'll make use of use effect hook over here. Because there's a side effect, right? And how do we use use effect? So Oops, just pop up. Okay, so how do we make use of use effect? I have a function, first of all, o. And here, this is a function that will be called with the logic. Okay. And then I have a comma with the dependency. So whatever dependency I want to add, I can add over here. Okay. This is done. Okay. This is an arrow function, so it needs to have an arrow. All right. This is a syntax that I'm going to make use of, okay? Now, I want to perform this operation. So the operation is going to reside in these curly braces, so I'll have an end over here, and I'll paste the fetch code over here. Okay? I'll you can end this with a semicolon if you want, like so. Okay, I'll just zoom out so that it's visible in a single screen over here. Okay? Now, one thing to note over here, I'm passing in an empty dependency area over here because I want this use effect hook or this code to run on the first mount or on the amount of the component, the first render and not after that. As for the rules of use effect, if you want a particular logic to run on the component mount, you have to pass in an empty dependency array over here. Okay? Now, of course, what this does is it fetches this. It does a fetch call to this particular endpoint. It gets the response and converts it into a JCN over here, and then it locks the JCN onto the console using this thing. Okay? So straightaway, what I'm going to do is I'm going to open up Console over here. Okay. And I'll give you a disclaimer over here that this thing is going to be printed on the console twice. Why? Because we are running in strict mode over here. Okay, Mint ch sex. You can see strict mode. If you want to see the output only once on the component mound, you have to remove the strict mode from there. All right. So I'll save this. The moment you save, you'll see this output onto the Console. All right. You can see. And you can expand as you'll see, use ID. Uh, ID title over here and completed falls. All right. So this is working absolutely fine, and this is how you can fetch the data and display it onto the console. All right? Now, of course, displaying data onto the console is not the goal, but the goal over here is to see how you can make use of fetch to do PA call. Okay, now we have the data into our react application, but we are just logging it into our console. Now, from here, this part of the code, we can take this data anywhere, right? We can take this data anywhere, meaning if I want, I can also update or set this data into a state. Okay? And let's do that. Okay? So what I will do is I'll have a state over here. I'll say data. I'll have set data over here, something like this, I'll say use state over here and I'll have an MTRA as the initialization over here. So I have this data state. Now what I can do is I have this JCN over here, right, as the input. So instead of logging it onto the console, what I would want to do is I would say, instead of console log JCN, I'll say set data, and I'll pass this JCN over here. Like this. Okay? And this is done. Okay? Now, if I save this, the data is not logged onto the console, if I do refresh. Data is not locked onto the console, but it is now updated into the state. All right? It is now updated into state. But we are not making use of state or displaying it anywhere, right? So what you can do is you can display the fetch data as well, right? So what I'll do is I'll come over here, and let us have a unordered list. So since we are getting a list of values over here. So if you see the data, if I do a call over here, or we have the data over here, right? This is what the data is. This is how it's being sent to us. So we can display the user ID, ID, title, and complete it. So what I will do is I'll have unordered list over here. I'll make use of some jar Script. Okay, I'll say data dot map. Now since we are making use of array, Okay, I'll say data dot map. Now here inside map, what we would do is I would say to do over here, because that is what we are fetching. Okay, we are fetching the to do. Okay. And so here right now we are getting only one object. Okay? What we will do is we'll later on update it to get a list of objects also. Okay, so don't worry about that. Okay. In fact, I would say here, since we are getting only one object, we don't even need map. Okay? So what we can do is let me remove this. Okay? We don't even need map, I would say. I would just display it this way. Okay? So I'll say data taut, and what is the property? Property is title, right? We have one title property, so I'll say title, something like this. Okay. Oops, so this will be in the pair of curly braces. You can see this is the title that we're getting from the API. You can see. Okay, this is the data that we are getting, right? You can display ID, user ID completed as well. Okay? So you can display ID over here. Okay. I can display user ID also, something like this. Okay. User ID. Okay. You can see ID is one, user ID is one. Okay. And you can have some sort of text over here also, user ID. All right, so, okay, no, this is ID. So this is to do ID in short. To do ID. Okay. And this is user ID. So I'll have user ID, something like this. And this is to do title Okay, something like this, and you can see the data, right? And completed or not, that also you can have over here. Okay? So completed or not that also you can display. Okay, it's totally up to you, but we don't need map because we're not getting a list over here. Okay? So this is for single set of item over here. Now let's say tomorrow tomorrow. So here, I'll scroll down. Here we're getting the list of todos. You can see, we're getting the list of todos. So this same logic, you can convert it into to do over here, right? You can do that, okay? Or let us change this to post also. You can change it to post if you want. Okay? So what I will do is I'll take the end point. Post. Okay? I'll add it over here. Okay. And I'll replace this endpoint with this, something like this. I'll remove this. Okay. This is pretty straightforward. And now, what I will do is I'll have data dot map because now we are getting the list of information, right? So I'll have this map. Okay? So first of all, before adding map, I'll have a list unordered list. Then I'll say data map over here. Okay. And here, I'll say post. For every post, okay, I need to do something. Okay? What will I do? That is what I'll define over here, okay? For every post, I'll have a list over here, okay? And list will have a key. Okay? Now, what will be the key? What should be the value of the key? So it should be ID. I'll have a unique identifier for the key. Okay? So I can say post dot ID over here. Okay. Then over here, after LI, I'll have P tag or H two tag depending on how you want to display it. I'll say post dot title, something like this. Okay. And then, uh let me see, title is one and body is one. I'll say title, and then P, and then you have, uh post body. So you can say postt body, something like this. Okay? This is done. Okay, now you're getting the error. So if you see the error, I think I know what the error is. It's probably it has to do or you can see data dot map is not a function. Okay? Understood. So here we are setting this as an array. Okay? So we will remove this and I'll set this to null over here. Okay. And let us see if the error goes away. Okay, the error is not going. Okay, so I figured out a problem. The problem was setting this to null. Okay? So me setting it to an empty array was actually right. Okay? I don't know why I was getting the error on doing a hard refresh, the error went away. Okay? So the code is right. I had this empty array correctly placed initially, Okay, because we want to have it as an array because we are making use of map over here, right? And map is a method for arrays only, okay? It works with arrays. Now if you see, after doing a hard refresh, and if I see over here, you can see the post body and post title, you can see how it's been displayed over here. Okay. If you want, you can display the post body using the bowl tag. You can have B over here. Okay? Or you can have strong, in fact, okay? So I'll say strong. Okay. And I'll just add the title wrapped into the strong and you can see title and the pose here. Okay. So we are actually fetching 200 pose. Okay, because that is what this API says, Okay, if you see over here, it gives, sorry, 100 pose, not 200 posts. It is giving 100 pos and we are displaying 100 pose over here. Okay? Using the fetch fetch of JavaScript. Okay? So how this works is, initially, this use effect code block is executed on the first component mount. Why does it execute on the first component mount? Because of this dependency array? As per the rules, if the dependency array is empty, okay, whatever code block you have over here will be executed on the component mount once. Now what happens in the component mount, you make use of fetch. You call this endpoint over here, and then you have a set. You are given a promise, and then you're making use of then over here to get the response in Jason, and then you are making use of the response to set data. Okay? What is set data? Set data is a using set data, you can set the data over here, which is nothing but the state over here. So it's a set of function. Okay? Then you have data with this data that you're getting from the server. Now what do you do? You can make use of map over here to display the data in this way. Okay, so we are iterating through it and we are displaying. If we are getting only one post over here, if you're getting only one post and not the list of post, then you don't need map because you don't need to iterate over the data, right? I hope this is making sense, okay? So this is where all Javascript react concepts come together. Okay, so how many concepts we are using? We are using the use effect hooks, we are using concept of hooks. You're making use of states over here. You're making use of fetch from JavaScript. You're making use of promises over here. And then over here, you're making use of map function with arrays, and you are displaying the data. You're also making use of her sex. All right? So you can see how this is rendering the data from a remote server. And I hope you have been able to follow along, and I hope this was useful. 6. Efficiently Managing Loading States and Error Handling: Hey, there. So we are talking about how can you work with APIs in react? And in the process, what we are doing is we have built a very simple component that does a call to this API to get the list of post, and we are displaying the data here in the component. Okay? And this is what the output that we are getting so far. And if you wish to see this in the full screen, so this is our EPI, and this is what the output is right now, okay? You're seeing all the posts. Okay. Don't worry. This is this post or in some other language. Okay? Maybe let me translate if I translate this, it says it's in Latin. Okay. Absolutely okay. We just want some dummy data to work with, right? It does not matter which language. Okay. So yeah, this is post. Now, we're displaying the data. Now what can happen is whenever you're working with EPIs you are doing a remote server call, okay? You're doing a remote call to something, right? And there will be a scenario wherein the data that you are getting is taking a bit of time. So it's a good practice to handle or to have interface wherein you tell the user that the data is being fetched, and that state, we can call it as a loading state, right? So how would you handle loading state when you are doing or when you're fetching data from a remote server? Also, this was first scenario wherein you would want to handle a loading state. Second scenario is you might want to handle any sort of error situations, okay? Now, error could be like there could be typo in the URL or the data is fetched, but when you are converting it into JSN, you're getting an error over there, okay, because the data that is received is not in the right format. How would you handle and manage errors in that case? Okay, that's something that we are going to talk about. So two things we are talking about handling the loading state and managing the errors when working with APIs, okay? First, let's talk about loading state. Okay? So for loading state, we can actually have a custom UI, or different G six that we return if the state is loading. Okay? So what I will do is, I'll have a state over here first. I'll say loading. Okay, and I'll say set loading over here. Okay, and I'll say use state, something like this. Okay. And I'll have this. Okay. So you can have this is a boolean. This is a boolean state over here, okay? The state is having boolean data. So true means it is loading data currently, and false means it's not loading currently. Okay? So I'll have this initialized to false, let's say over here. Okay. Now what we would do is if the state is true, what we can do is we don't want to show this interface. Okay? Because if the data is being loaded, what is there in this interface, it's the post data that we are getting from the server. If the data is not yet fetched and if it's in the loading state, then we should not display this. Instead, we need a different sort of a UI, where we need to tell the user that hey, the data is loading. Okay? So what you can do is you can have if statement over here. You can say if, and I'll say if loading. Okay, so if loading is true, what I do is I return. So you can have multiple return statements over here. Okay. So here you are returning some JSX, but if the loading is true, you return a different J six over here and what are we returning? We'll return a simple P tag over here. Okay, so I'll just add a P tag, and I'll say loading, something like this. Very simple. Okay, it's just a text. I'm not stressing about creating a complex interface, but you can define a complex thing over here as well. That is what it means. Okay? Now here, this is not being rendered because the state is false, right? So the moment I change the state to true, if I save this, you'll see loading being displayed. Right? Loading means this is still being loaded and the data is not yet fetched. Okay? So this is what the user will see when the data is being fetched, right? And we are manually changing this true to false and false to true, right? And we are seeing whether it's working fine. Okay? So this is not getting any sort of errors, this is perfectly valid. You can have multiple return statements, but they should be conditional. Like this is conditional, right? You cannot have just return statement over here. Okay, it's actually a function after all, right? This becomes unreachable because you're returning over here, right? So it does not make sense because these are Ja script functions over here, nothing else, right? So you can have this kind of return. You can say if loading, then return this, okay? Now what I need to do is when the data is being fetched, I need to set the value for loading the state for loading over here. Okay? So what I will do is here, initially, I'll say the state is false, okay. And within this use effect over here. So when the data is being fetched, okay? I'll say set loading. Okay? So when we are setting the data over here. So initially, when the loading starts within this use effect, I can say set loading to that of true. Something like this. Okay. And then once the data is fetched over here. So when the set data is being called over here, when the loading is done, then we can have, we can add this into Cibras because now we're adding more than one statements and here I can say set loading to that off can say set loading to that of falls because loading is done, right? Okay. So this is how you can manage loading. Now, if you save this, if you're refresh, you'll see loading being displayed when the EPA call is happening. You can see, you can see. It comes for hardly a second because the EPA is fast, of course. Okay. But if the API is taking a bit of time, of course, this will be there for a while. So what are we doing? We are managing loading state with the help of a state over here, okay? We're displaying loading with the help of a state. We have loading state defined with default value of falls, and then we are having this UI that if the loading is true, then return this JSX, okay? You can modify this to whatever you want to. You can have custom CSS defined for this. It's totally your choice. But how is this being displayed and hidden? First in the use effect hook, the first thing we are doing is setting loading to true. And then we are setting the loading to falls. Now if you miss once the data is fetched and it's updated in the state, we are setting the loading to fols so that the data is displayed. If you miss this step for some reason, setting the loading to folds, it will be just stuck at loading is true. Even though the data is set over here into the into into the state over here, all right? You are not updating the state that you that you had true over here initially. I need to update this. And the moment I update, you'll see the data being fetched. And this is giving you a nice indication to the user that a data is being loaded, if the EPI takes time. So this is how you can manage the loading state when working with API calls. Okay? Now comes the second part, which is the error handling. Okay? Now, error handling, it's evident if you're working with EPIs, errors can happen, right? So what I will do is I'll have one more state over here. I'll say const, I'll say error, and I'll say set error, and I'll say use State to that of null. Okay. So initially error is null. It's a state that I'm creating over here. Okay? Like I have stated for loading data and error. All right. And what I will do is here, I have this then, this is the DN which gets executed once the data is received in the JSN form. Okay, what I can do is I can add one more step over here. I can say catch. Okay. You can say catch over here, and I can say error, catch the error, and you can actually manage the error over here. Okay? So I can say console dot Log over here first. I can log the error. I can say uh, okay. Let me make use of the templates. Okay, so I'll say error fetching data. Okay. And I can just have the error information over here. Being passed in. Okay, this is done. Okay, I missed the semicolon, so I'll add a semicolon here. Okay. I'll just zoom out a bit. So that's visible in the single view. So I have this Console dot error. Then I can say set error. Okay, set error, and I can update the error over here. I can update the error information to field to fetch the data. So this is the message that you want to showcase to the user. I'm setting that, okay? And I'm saying set loading to that of falls, okay? You need to also update the loading to falls over here because initially you have set the loading to true. Right in the use effect. Okay? So once the data is loaded, you are setting it to falls, and once there is any sort of error, you're setting the loading to falls because it's done loading, right? So you need to update the state. Okay? And we need to display the error to the user. If you want, you can display. So what I will do is I'll add if something like this. I can say if error over here. I'll I'll display the error. I'll simply display the error. I can say error, like so. Okay? Now, if you refresh, you won't get any sort of error over here, okay? But what you can do is actually you can, uh, we can create a custom error object and you can actually throw the error object and we can see how the error is happening. That is something you can do over here. Okay. So once the data is being retrieved over here, what you can do is you can say a new error or you can say throw new error. You need to throw the error, throw new error. Okay. Let's say you got this error when passing the GSN. So you can say, Oops. So this will come outside. You can say something went wrong. Something went wrong, something like this, and you can save this. You can see fail to fetch data, right? Because we are throwing a custom error over here manually, all right, to simulate the error situation. All right. And if you come to Console, you should see error being displayed. You can see error fetching data, something went wrong at this slide. Okay? You can see the message as well. Okay? Now you're doing console dot log. You can do console dot error. That's a good practice over here. When it comes to logging errors. Now if you refresh, you'll see the redo it being displayed in red. Right? So this is how it's working, and it's throwing twice because we are in strict mod, of course. So yeah, this is how you can manage the error over here. Okay? I hope this is clear and it is giving you a good indication of how you can build user friendly applications because, you know, things like EPI taking time to load or the responses taking time to be rendered or any sort of error happening. These are all normal situations. These are all H cases that can happen. And of course, when you build when you're building dynamic applications that is consuming APIs, it's important that you are aware as to how you can deal with this. All right? I hope this is useful, and I hope this is given you some good knowledge about how you can work with APIs. So, yeah, that's about it. I'll see you soon. 7. Simplifying API Calls in React with Axios: Hey, there. So now it's time that we begin talking about Axis. Now, what is Axis? Axis is a HTTP client, which is promise based for JavaScript. Okay? Now, when I say JavaScript, it means it runs on browser, nodejs, react, and all of that. All right? Now, this is the official website of axisxshttb.com, and you can even do a Google search. A simple Google search Axis library or anywhere, like on Google or any favorite search engine of your choice, you will see this first link up here, which is Axis HTDP doc intro. Okay, so this is the URR over here. If you come over to this website, you will see some details about what Axis is. And on the right hand side, you can see some code that is a demonstration of how Axis works. It's a simple get request that is being done. Right? Now, axis and fetch, both are the popular methods for making HTDP requests in JavaScript. But there are some things as to why access is being used. Access is simple. It has a concept of interceptors, okay? So interceptors meaning if for example, if every API call in your application is required to have a OT token as well, or some sort of headers that are consistent across all API calls, then what you can do is you can have the concept of interceptors where you can have a centralized handling of these common headers. These are interceptors, okay? So yeah, access is also quite popular with Fetch. So Fetch is an inbuilt way of doing API calls. Access is a library. Okay, so you come over here on this page. If you say get started, you'll be taken to this page, where you see some of the features of axis, you can see, it has a way of intercepting request and response using interceptors. You can make all these sort of supports promised API. I can transform request and response data. You can cancel request as well. There is timeouts. Okay? So it gives a bit more flexibility as compared to fetch over here. Okay? You can see setting bandwidth limits for node chair. Automatic JSN handling in the response, okay, posting HTML forms as JASN. All of this. Now, this is not by default available. You need to install this package NPM installed axis. Okay? If you're using BR, you can make use of this. So for NPM, this is a command for BoA, this is a command, and for Yarn this is a command, okay? There are other ways of using it using these script tags over here. Okay? Now, if you take a look at the example over here on the left hand side, if you click on this example button, you'll see this is how you can make use of it. Okay? You can see this is the code to do a get request and handle the response, catch the error, and to have finally as well. Okay, finally is always executed irrespective of whether the request was successful or not. Okay. So this is demonstration over here. We are going to try out hands on example over here for axis and we'll see how we can make use of it in our project. All right? I have a simple project over here, okay, where in what I'm doing is I am actually having API call over here using fetch. Okay, I'm throwing a custom error, which I'll disable. So if there is no error, you will see, okay, so I'm seeing an error still over here. So I did a hard refresh, and it worked actually, okay? So I just commented this the custom error that I was generating, and this is what the output is. So you can see the loading state over here, okay, loading. And we are managing loading and error over here. If there is any sort of error, we are displaying that. And we're managing all these three data loading and error with the help of states, and we are making use of fetch over here, okay? Now let us transform this thing, I would say to axis. Now, first thing we need is we need access to a terminal, so head over to the terminal over here. Okay. This will give you a terminal in the current working directory. So you can type in PWD and see where you are. I'm actually in my project over here. Okay. I'll say clear. And now you could see this command over here, where it said, This is how you could install axis. I'll just copy this command because I'm making use of NPM. And I'll run this over here. Okay. Now, this will add NPS. Sorry, this will add axis to my application over here. Okay? So it's successfully added. Okay. And what I would do is you can confirm this by heading over to package dot hasN over here, and I'll sample this terminal over here. You can see axis has been added as dependency, okay? So yeah, this has been done, and axis is now available for our use. Now, the first thing, if you're making use of axis, you also need to import it. So I'll add a import statement at the top. I'll say import axis and it autosugest and auto completes over here. Okay? So we're getting this axis instance over here. Now, what we need to do is instead of fetch, we'll transform this into axis, right? So instead of fetch over here, all right? I'll say axis. Tot, get over here. Okay? This is what it is. Okay? I'll say then response. And when when best thing is here, we are converting the response to JCN. With Axis, you don't need to do that. Okay, you get the response as JSN itself. So if you come over here, you'll see one of the features automatic JCN data handling in the response, right? So that's one good thing. So here, this one step will go away, ok? This will go away over here. Here instead of Chasin, we can just rename this two response over here. I could say response, something like this. I'll say set data. Set data is response. Now, this response is actually having this response is an object and it has data attribute. You have to access it this way, response dot data. Okay? And you can actually do a Console log for response also and see what it prints. I'll just do that. Console log and response here. Okay. We'll check the console logs shortly, okay? But this is how it works and you can set loading folds. You have catch wherein you are catching the error, and the rest of the things are same over here, okay? And, yeah, I think it should work absolutely fine. I'll just save this and I'll do hard or fresh. Okay. You're seeing the output. Now, if you head over to the console, we should see, so let me go to the console, let me zoom out a bit. Okay. Okay. So All right. Now over here, if you see if I expand this, okay, you can see the object being printed, okay? Or let me just switch over to full screen, okay that it would be better over there. Okay? So this is the output over here. Okay? Let me go inspect. Now say Console. Now, you can see the object being printed. Now, this is the object, okay, that we get This is a response object, actually, right? And this has data. You can see this data. So if you want to access the data from the API that you have got, you can actually say response dot data. Okay, this is how it manages it, and headers is basically the headers that you have some configuration data. Okay? You have some request related information. You have status. So if you want to access status, what is the request or response status? You can say response dot status. You can handle it that way. Okay? So yeah, the goal is to show you how the response data looks like if you're making use of Axis and you have to make use of response dot data over here. Okay? So yeah, this is how you can start using axis. And I hope this is pretty clear. You can also handle the error this way if you wish to, you can see, fail to fetch data. And if you come over here, okay, you'll see error fetching data, something went wrong. Okay? This is the error message that we passed in. Okay? You can see something went wrong, right? So this is how things would work. I'll just comment this out, okay. But yeah, this is axis for you and I hope you're pretty clear as to what is axis and how you can make use of it. 8. Executing Multiple GET Requests Concurrently: So let's start talking about how you can trigger multiple Get request with axis, okay? So here we are making use of axis to trigger this endpoint. Okay, this is the post endpoint. And if you come over here, okay, this is Jason placeholder dotpco.com. And here, I'm triggering this first endpoint. I want to trigger one more endpoint, let's say user, I'll open this in a separate tab and you can see this is the data that I should get. Okay, so let's say I want to trigger this API call as well. How would I do that? Okay? So over here, what we will be doing is here, I'll say axis dot all instead of axis dot Get, okay? Or we can keep axis dot Get and we will have to move this Get call into axis dot O. Okay? So axis dot O, something like this. Now what axis dot O does is it accepts an array, okay? And I'll cut this over here, cut this. And I'll move this inside this array over here. Okay? So let me align this up a bit better. Okay. Let me align this. Well, okay, we have this over here. Okay. And then you have then over here, which was there early on as well. Okay? But now you are doing this single EPI call over here. What I will do is I'll copy this. I'll add a comma over here. In the end. I'll add one more EPI call, and I'll copy this user endpoint over here, and I'll replace this second call with the user endpoint, something like this. So now you can see axis dot O. I'll just zoom out a bit, axis dot O over here, and we are doing two separate EPI calls, as you can see. All right, I'll just extend this. So you can see this is how it's going, okay? Now, what we would do is we are doing it then, and now and then we have a response, okay? So now we need to have a way to handle the response from both separately, okay? And for that, we'll make use of axis dot spread. You can see axis dot spread. Okay? What is axis dot spread? So axis dot spread function. So spread is a function that allows responses to be handled separately, okay? Now we can pass in post and users as a parameter to correspond to the responses from the post and users end points separately. Let me show that to you how you can do. So here instead of response, I'll get rid of the response over here, and we can see over here, post Okay, and users. Okay? This is something that you can do over here. You'll see all the red marks over here, of course, because you're making use of response and response doesnt exist. So I'll take this post over here and I'll replace response with post, something like this. I'm still seeing a red mark over here. Okay, I understood. So spread basically, this entire thing has to be within spread. Okay? So something like this. So, yeah. I hope this is making sense. So here, spread is taking this entire thing over here, okay? And you have post and users over here. Okay? Post is basically the response from post, and user is basically the response from users endpoint over here. Okay? And spread lets us handle these two separately, okay? So I'm logging in the post over here. I'll also log in the user information over here. Okay. Let me say user Okay, users. Let me save this. You can see post is working absolutely fine. Okay? Really great. I'll head over to inspect, or let me just close this inspect. Not over here, but I'll have this full screen view, and we'll refresh. You can see post being displayed. I can inspect, console. You can see the object being printed four times, because each object is being printed twice because of the strict mode. So here you are seeing this data over here. This is the post data. Okay? This is the first thing, post data. And then we have the post data again. Okay, so this is a user data, you can see. This is a user information being fetched. This is the post data again, 100 and this is the user information, again, which is ten users, right? So yeah, this is how you can handle and work with multiple API calls. And this is one of the features or one of the flexibility that Axis offers us. Okay? You have both these data. What you can do is you can decide what you want to do. You can store store the post related information in one state, and you can store the user related information in another state, and you can display it over here. You can render it onto the UI as well. Okay? But yeah, so far so good, we are able to do multiple API calls with the help of Axis, and I hope this is pretty clear to you all. 9. Submitting Data with POST Requests in Axios: So now it's time that we begin talking about how can you make use of the post request in your react application? And for that, over here on Jason Please holder, if you scroll down. Okay, here you will find this EPI or this endpoint over here, which allows you to do a post request. Okay? So on slash Post, if you do a post request, okay, it would accept it. And here you have a guide for usage example. So I'll head over to the usage example guide, and I'll scroll down over here. Okay, you can see this example over here, okay? So creating a resource, okay? So what it's going to do is here we are making a post request. You can see the method is post. This is the body that you're sending in, the headers, and this is how you're managing the response. Now, the response you get, okay, you will get what you sent, along with the ID over here. Over here, this is a fake API, so the resource will not really be updated on the server, but it will be fake as if. Okay. So what we will do over here is I'll come over here. Okay. And here, what we need is we need a form. So here, I'll create a form, I'll say form, something like this, and form won't have anything. I'll just have a button that will just trigger a post request. So I'll say button type, I'll say submit over here. Okay and I'll say add post, something like this. Okay? You have this button here, okay? Now on click of this, we want the post request to be triggered. Okay? So I'm going to say on submit over here on submit. Now I need to add a function. I need to link this to a function, so I'll say handle, submit. Okay. This does not exist yet. Of course, we need to create this, right? So over here, what I'm going to do is I'm going to create this const on submit function. Okay? So I'll say const on submit. Something like this. Oh, sorry, not submit, handle submit. It's not on submit handle submit, something like this. I'll say event. So it will accept the event over here, and I have this function definition over here, something like this. Okay. Alright, so now I need the logic over here to basically handle the post request. Okay? So what I'm going to do is I'm first going to create a new post, okay? Now, what is the data that I need to send is title body and user ID. This is what I need to send, right? So I'll copy this and I'll come over here, okay. And over here, I'll say const, new post, and I'll have a post created, something like this. Okay? Okay. I'll keep this on multiple lines. That's absolutely okay. Okay, something like this. Okay, so this is the post. This is what I would say. This is the object that I want to post, right? So the title is fu, body is bar, and user ID is one. Okay? Now, what we can do here is this after this is created, I'll have a axis being used. So I'll add axis and you can see the import sttment being added at the top. So we'll make use of axis. I'll say axis dot Post. Okay. And post is a method that we'll make use of. I have to pass in the URL over here, and then I need to make use of then to handle the response. Oops. So then to handle the response, something like this. Okay. So over here, what I would do is I need the Okay, I need to close this as well over here. Okay. And and I'll get rid of this open bracket. Okay, closing bracket. So within post, I need to pass in the URL and the new post object. So I'll come over here. This is the new post object. Okay. So I'll mention that over here. And in the end, I'll say comma new post. So this is the object that I'm passing in. Okay, something like this. Let me go full screen with this. All right. I'll just go full screen so that you see everything. Okay. You can see axis dot post over here, and I'm passing in the new post object, along with this. And then now in the then, what I need is I'll say response, okay, arrow function. And over here, I now need to handle the response. Okay? How am I handling the response? I'll just say console dot log over here, okay? And I'll say new post added. Something like this, and I'll just say response dot data. Okay? Like. Okay then I'll say set data, oops. Okay, so set data does not exist. We need to add a state over here. Okay? So what I will do is I'll say const data, and I'll say set data. I'll make use of use state over here. Okay. And here, what we will do is we'll call set data, something like this. And over here, I'll say response. Dot data and comma and I'll destructure data, something like this. All right. So this is done, I guess, all right. No issues as such. And yeah, handle submit is also linked to this. Okay. So now let me minimize this. And here, I'll do a refresh, quick refresh. We'll open up the console as well, to see what output we get. And I'll say add post over here. Okay. The moment I say at post, oops, I'm not seeing anything. Okay, so I need to also say E dot, prevent prevent default, prevent default. So I need to I need to say this, and now let us try this. Okay. So I'll say ad post. Oops. So it says data not iterable. I'm also getting an error over here on line 16 over here. Okay? So the issue is response dot data, and I'm destructuring the data. Okay? So this is giving error and error is uncod promise. Data is not itraable. So what I would do is I would get rid of this thing over here, this. Okay. And I'll save this. Let me do a refresh. Okay. So I've got rid of this part over here. Okay. This is now pretty simple. I'll say add post and you can see, okay, the post being added and which post is being added that is also being displayed over here. All right. So yeah, this is how a post request would work when you're working with Axis. Okay? It's pretty straightforward. I'll just go full screen so that you get a better view. I'll just zoom in a bit. Okay. We're making use. This is where the crux is, okay? So you say axis dot post, specify the URL and the object that you want to post. Okay? And then you have the handling over here, and you handle the response that you get. All right. So yeah, that's about the post request with axis. I hope this was useful and I hope you have been able to follow along. 10. Optimizing API Security with Axios Interceptors: So now it's time that we begin talking about interceptors and understand what they are. Now over here, I have an example already written, wherein I have this header and a button to add a post, okay? And when I click on Add Post, it is going to do a post request to a remote server, and you can see the data being posted in the console. After the successful response from the post request, okay? And you'll see this happening multiple times. Okay. We're making use of this fake API over here, which is Jason placeholder, and if you scroll down, I'm making use of the post API over here. That's one, okay? Coming back to the code over here, all right? This is the code base. Now, what are interceptors and why do you need them? Okay? Now, interceptors are a thing with axis which allow you to run custom code or intercept the request, before it is handled by then or catch. I hope this is making sense. So interceptors are nothing but they allow you to intercept the request before they are accepted by then or catch, okay? Now, why would you want to do this? So you might want to have some sort of a custom code to run before a request is sent or after a response is received. Okay? Now, custom code might involve doing things like adding authentication token or anything of that sort, okay? Then in that case, this concept of interceptors come into picture, right? So let me give you a demonstration of how you can make use of it. Okay? So here at the top, let's say, I'll have an interceptor. I'll say axis tot I'll say interceptors. You can see the properties interceptor and you have request tot, use. Okay? So you have use over here, okay? Now, within use, what you would do is, this is what we're going to use. Over here, I'm going to have arrow function. I'm going to say request. Okay? For every request, you give me a console log, okay? Console log should be starting request, okay? Something like this. Okay. Now I'll save this, okay? Now, if I come over here, if I open the console, let me clear the console. Let me do a refresh. Okay. Now if I say add post, you'll see starting request. Oops, there is some error over here. Okay? Error says uncaught in promise, type error, okay? So I got the error. The error is we have to return request over here. Okay? That's a mistake I made. If you come over here, if you refresh, clear, and if I say at post, you'll see starting request new post added, okay? So remember to return this over here. Okay? So yeah, this will be intercepted and this will be printed for every request over here. You can see. For every request, you're seeing starting request, right? You have access to the request object that you can print over here. So I can say request over here. Okay. If I come over here, I refresh, if I say add post, you can see I have access to the entire request object over here. I can add or remove any sort of custom headers that I want to. Okay? So I can say request dot headers, I can make use of it that way and I can customize. I can add I can add any sort of token. So for example, if any sort of request is authenticated, right, and you might need to pass in the token from the local storage, right? Now, wherever you are using Axis, it would be really cumbersome to do that, right? So you can have an interceptor defined. Globally. And whenever any request is being triggered to the server, you can have a logic over here wherein you go to the local storage, get the token that you want to pass to the server, and you can format it over here and add it to the header. So you can set request dot headers, add the token and keep it over there. So what would happen is for every request, the token is added because that is default, right? Server needs it. So you don't have to replicate that code everywhere. That is how it helps, okay? And this is a request interceptor. I have a response interceptor that I want to show you as well. Okay? So axis dot interceptors, dot, it would be response, if you guess that right. You have to say use over here. Oops, we'll say use, and we'll make use of this, okay? And here you'll see response, and you can have something like this. You will do a console log over here. Okay. You can say response. Okay. Oops. And over here, you can say response. Like so. Okay. And over here, return response. Something W. All right. So this is for every response, you have access to the response as well. Okay? So let me to refresh. Clear. I'll say add post. You can see starting request. You have the request object, response, you have the response data, and then you are seeing this being printed. Now, where is this being printed from? This is being printed from then over here. You can see. So this then thing was executed in the end. Okay? What does this mean is? This means that the interceptor is called first whenever the response is received, and then the data is processed by then. You can see over here. So this part is executed first whenever the response is received, and this part is executed before the data is sent to the server. Okay? So I hope this concept of interceptor is clear and I hope you have some good understanding of how this works. You can play around with this and take a look at the data being intercepted, and I hope this has been insightful. 11. Building Custom Axios Instances for Better Control: Hey, there. So now it's time that we begin talking about custom axis instance. Now, what is a custom axis instance? So here we are making use of axis, okay? But with axis, you can create a custom access instance that is preconfigured version of axis for your application. And when you create it, you can set default options like base URL headers, any sort of default headers you need, any sort of timeout settings that you want the request in your application to have. So all these kind of global configurations, you can with the custom axis instance and every API call that the entire application is going to make across all the components is going to make use of that custom axis instance, right? So for example, let me give you a scenario. So here you have this post request. I might have one more Get request over here in this same component. Now, I might have thousands of components, right? Hundreds of components, let's say, in that particular case, let's say, at least 50 components have API calls. Right? So if they have EPI calls, you're going to repeat all this URL over there. Okay? This is not good, okay, because tomorrow if the server URL changes, it's not good. If any sort of parameter changes, okay, you have to make change in all the files over there. Okay? It's better to have all the common configuration related code to be in one file so that if there are any sort of changes, you can change it at one place, and then it's all it's propagated throughout, right? So this is where custom access instance comes into picture. So to create a custom access instance, I'm going to show you how it'll work, okay? So here we are making a post EPI. What we can do is we can say const API. You can call this anything you want, but I like calling it API. You can say axis dot, create over here. Okay? This is how we are creating the custom axis instance, and within this, you can have all the configuration defined. All right? Now, what all configuration can you have over here. Okay? So for example, here for this thing, what I can do is I can get this. I've cut this and over here, I'll say p URL. You can see the paceRL. You can say colon, I can add a PRL over here, something like this. Okay? Oops. So not backticks, I'll have this. Okay. This is the base URL for all the API requests. Okay? Then I can have headers over here. You can see this headers property. I can say in headers, I want default headers over here to be like what all default headers you can have. So let's say I want to have authorization over here, okay and I wish to have, let's say, bearer and you can add some token over here, okay? So whatever token you have, you can add that. Okay, and sent it's sent along with the API, okay? You have defined this. How do you make use of this? Okay? So what you can do is here, instead of making use of axis dot post over here, you can say API, something like this, api dot post, and this is going to work, it is going to make use of this as the BCRL and it is going to make sure that these headers are present, for example. If I save this and if you come over here, Okay, I have this application up and running. Okay, you have this button over here, which will trigger a post request. Now, if I say add post, okay, you can see new post being added. Alright. So I'm not seeing This is working fine, but I'm not seeing the request being printed over here. Okay? So that is something that I can print. Okay? Let me print that as well, okay? So so to get the request printed, what I will do is I'll add intercept over here, okay? So we add interceptors this way, axis, interceptors, dot request, Tt use over here, something like this. Okay? This is how you normally add interceptors. Okay. But since we are making use of custom axis instance, what you can do is instead of axis over here, you'll say api dot interceptors. Okay? That is what you are going to do. All right. And here, you're going to say request over here. Okay. And over here, you need to print the request. I'll say console dot log over here. I'll say starting request. Okay. Starting request. Over here. And you can add the request object over here, something like this. Okay? This is done. Now if you come over here, okay, let me do a refresh. If I say add post, oops, so I know this error. All right. I need to return the request as well, okay? Return request. Okay. Now it should work fine. A fire refresh. If I say ad post, you'll see the request being printed. Now if you expand this, you should see that when the request was sent, there is a authorization header. This is the authorization header that we added via the custom axis instance over here is being added, and it's being sent to the server. You can have any sort of logic over here wherein you fetch, you know, some sort of token and all of that, you can display that, okay? So this is really helpful in a way, right? And, yeah, this is what it is. This is how you can actually this is how actually you can have a configuration separated from your code. Now, I would like to spend some light on when you should use custom axis instance and when you should use interceptors, okay? So let's say if you're sending in token, okay, you can add a token configuration here in the custom axis instance also, and you can add a token here in the interceptor as well. So whenever request is being sent to the server, just before it's being sent, you can add a token over here. Okay? So when to use which method, right? Now, if your token or configuration is static, any sort of configuration that is static, Okay, and it does not require a change, then you can add that configuration to the custom axis instance over here. Okay? For example, you might have a for example, you might have a sort of code or you might have a sort of header that you might want to pass over here, which says content type. Okay, so you can say content type over here. So this content type header, okay, this means application JSN. Okay. So this kind of headers which are static, basically, those can go in the custom access instance. But there are requirements wherein you might have headers that are dynamic. Now what I mean by dynamic headers is, let's say you want to add a header, okay, which contains the token that is fetched from the local storage. Now, local storage token might get refreshed from time to time. It might have an expiry. It is not static. It might not be static, okay? So in that case, just before the request is being sent, you might want a piece of code to execute to check what is a token, get that token and send it along with the request, okay? So in this scenario, you will make use of headers being added in the interceptor because this is not static. This is dynamic, right? And just before the request is being sent, you want the token check to be done, okay? So this is this is where the interceptors might come into use, right? Automatic error handling. So interceptors are excellent for having globally handled responses for errors. Okay? So if your response EPI indicates that a token has expired, for example, 401 unauthorized. An interceptor can have the refresh token automatically. Okay, I should I can have the code to refresh the token automatically and retry the request. So here we are having the request interceptor. You can have a response interceptor, wherein you can check if the error was 401. If it was 401, just have the code to refresh the token and retry. Okay. So this is something you can't do with custom axis instance over here, right? Because this is static, right? And, yeah, this is the difference between the custom axis instance and the interceptor concept. Okay? It might seem like many of my students feel like there is an overlap in the concept, but they both are distinct. That is what I'm trying to highlight. Alright? So I hope this has been insightful and I hope you have been able to follow along. Alright, I shall see you all so. 12. Supercharging Custom Axios Instances with Interceptors: So now what we would do is we would develop this custom axis instance further. Okay? And what I would do is I would first of all, move this to a separate file. Okay? So this code can become a bit complex. So what I would do is I would cut this over here. I would come over to my project structure and I would create a folder over here. I'd call this folder as you can call this folder as API. You can call this as Utils, something like that. Okay. And over here, you can have api dot has. And here, you can paste all of this code. Okay. And so this is needed over here, import axis. So that is something that I'll move over here in this file. Okay. And we need to export the API. So I'll say export or default, and I'll say API over here. Okay, something like this. All right. This is done. Okay, API is exported. And now we here, what we need to do is I'll input this API. So I can input this. Okay. You can see Utils API, ok? Okay, so for some reason, I'm not liking this Utils folder name, so I'll just change this to API as well. Okay. And I'll update the inputs, right? So yeah, now it's looking good. So what I've done is I have this EPI folder within which I have organized my pat Js. And what is pi dot Gs? It consists all the configuration along with interceptors for the custom axis instance over here. Okay? And you can use this wherever you want to. Okay? So this is how we are using it. And if you come over here and if I refresh, okay, if you say at Post, you'll see it's working absolutely fine. Okay, so this has made our code a bit more modular. Right. Now what we can do is we can improve on this over here. Okay? So we are passing in this header. Okay. I'll get rid of this token thing over here. Okay. Let's say we have the concept of dynamic token over here, right? So what we can do is over here, I have this request. Okay? I'm having this. And here, I can add one more function. I can say Cfico, something like this, and I'll add an arrow function like so. Okay. And over here, I can say const token. Okay. I can get the token, local storage, dot Get item. I'm getting the token from my local storage, so I'll say token over here. Okay. And then I can actually say if token is found, if token, then what would you do? So you would say config tot headers. So you can call it config or you can call it request. That's absolutely fine. So here I'm calling it a request, so I'm calling it as config over here. Okay? So I'm saying config dot headers dot authorization. Session, o is equal to. I can add a pairer token. So I can say pairero I need to add it in this format. I can say token. Something like this. All right. So token will be added only if the token is found, right? If token is not found in the local storage, this is kept. Okay. So this would be done. And if you come over here, okay? So idly, the token won't be added because there is no local storage right now, okay? So it's not art, right? It's not hard in the headers. Let us see. It's not add. You can see because I don't have anything stored in local storage for this application right now. But if you have, if you are storing it, then you will get that and you can send it over here. Okay? Now over here, this is done. What I can do is I can even handle I can even add some sort of error handling over here. So I can say error. Something like this, and I can say, oops, so I can say Console dot error. Okay. And over here, I can say request error, request error, and our space, you can say error. All right. And you can say return promise, dot reject. I'm handling I'm rejecting the request errors. Oh, okay. I'll say errors. Okay, something like this. Okay. What I'm doing is I'm handling the request error using this, okay. And this is one way, okay. Then you can even add the response interceptor. This is all about the request interceptor, until here. What I can do over here is I can say EPI dot response. Oh, 1 second. Pi dot interceptors dot response, p dot interceptors dot response, dot U.This is what it is. All right. And now within this, we need to add the arrow function. So what we would do is I would say response, something like this. Okay. And you can add some sort of handling over here. Okay? Now what handling we would add is we can say if the response is successful, we would just return the data. So I response, then return the data, right? So we'll say Okay, I response, this is written already. So if response, then return response. Okay, so I'm not adding logic over here. You can have your own logic basically to. But this is how you would handle it over here. That's the purpose, okay? So you can have success check over here for the response and then return Tita. Okay? So you're returning the response essentially. Okay? If there is any error, how would you handle that? Okay. So over here, you can simply come and you can say, okay, let me add a tab over here. Okay. And now you can say over here, error. Okay. So this is error, and then you can say like this. And over here, you can say if I can say error dot dot response. Okay. And so I'm checking for token expiration and any other errors globally. Okay? So I can say error, dot, response, dot status over here. Oops, status over here. And if it's equal to 401, okay, you can add any sort of, you know, any sort of handling over here. You can say console dot error, something of that sort, and you can say unauthorized. Something like this. Okay. You can handle it over here and you can add the retrial logic as well depending on what sort of errors you are getting. Okay. If you're getting 500 error, okay, like internal server error or something like that, so you can add one more over here and you can say one more check. You can say if error is 500. Okay, then you can say server error. So basically I'm just doing a log over here, but you can handle it the way you want, okay? I'll add semicolons. Okay, and I'll add round brackets over here. Okay. So I think this is pretty clear as to how this can help over here. Okay. And once this is done, okay, this entire thing is done, I can say return promise dot check over here, and I can say error. All right. So you're rejecting other errors basically. All right. So yeah, this is how you can keep on developing the custom axis instance. And this can be the custom API that has the custom pits, which is having the global configuration for the API requests that you are doing, including the baseURLs. So if you're getting the base URLs from the ENV file, you can have that logic over here as well, okay? And you can manage it separately from the ENV file. Okay? Headers tomorrow if any new headers is being added, okay? So remember, over here, you are not hard coding the URL, you are not hardcoding the headers. You're just making use of the API, and all the logic related to the component that is over here, okay? Only the logic related to the component is over here, not anything else. Tomorrow, if anything changes in the API, if any headers are needed, you have to just make the change at one place, okay? In this instance, this pi dot js will be used at all the places. So tomorrow if you have 50 components, this is what is going to be used in 50 components. So you don't have to do changes in the 50 components, you handle it once and it's taken care. Okay. So yeah, that's how this works. And I hope this is you're finding the usefulness of this over here. All right. So yeah, that's about this custom axis instincts and interceptors, how you can merge together and work with them. And I hope you found this useful. 13. Course Conclusion: And that brings us to the end of this transformative journey into the world of EPI integration in react. Well, we've explored how integrating APIs into your application can be a game changer in creating dynamic data driven applications. We delve into the fundamental of making API calls, handing loading and errors, and enhancing security by integrating custom access instances and interceptors. We've also learned and explore how you can make multiple API calls simultaneously, and you have now gained the skills that are necessary to elevate your react projects. But remember, the exploration does not end over here. I would encourage you to continue experimenting, exploring and pushing the boundaries of what's possible with EPIs in your react application. I'm excited to see how you will use these skills and knowledge that you have gained to supercharge your web development projects. Remember, innovation is all about embracing new techniques and technologies, and EPI integration or working with EPIs is a critical part of your development toolkit. Thank you for being such an engaged and enthusiastic group of learners. I hope this course has not only equipped you with new technical skills, but also has inspired you to think creatively about building robust web applications. With this class, you'll find a class project that I would encourage you to complete and share in the project section with the entire class. I would like to wish you good luck and all the best.