#153 Interceptors in Angular | Angular HTTP Client | A Complete Angular Course

[Music] in this lecture we are going to learn about a very important feature which is supported by angular HTTP client and that is interceptors the angular HTTP interceptors sits between our application and the server when the application makes a request the Interceptor catches the request before it is sent to the server by intercept requests we will get access to the request headers and the body and this enables us to transform the request before sending it to the server when the response arrives from the server the Interceptor can also transform it before passing it to our application so basically we use interceptors to modify a request before it is sent to the server and then once we receive the response before using that response in our application we can also modify the response with the help of interceptors one of the main use case of using HTTP interceptors is to add the authorization header to every request we could do this manually by specifying the authorization header for each request one by one but if we use interceptors to add the authorization header in that case that authorization header will be set for all the requests which we are sending from our application so in this way we don't have to do it manually for each request another use case where we can use an Interceptor is to catch the errors generated by the request and log them somewhere log them in a file or in a database so now let's try to understand interceptors with a simple diagram typically from our client we send a request to the server and then the server sends us the response but when we use interceptors in that case when we send the request from the client first it is received by the the Interceptor let's say we are using two interceptors so first the request will be received by the Interceptor one using the Interceptor we can manipulate the request let's say using Interceptor one we are adding some headers on the request which is not already there now in order to forward this request from Interceptor one from within the Interceptor one we need to call next method then only the request will be forwarded to next Interceptor or to the server if there is no more interceptor now in this case we have two interceptors so when we call next method from Interceptor 1 the request will be forwarded to Interceptor 2 there also we can manipulate the new request so this request which this Interceptor one is sending it is the modified request now on this modified request if we want we can manipulate it further using this Interceptor 2 and after manipulating it again from the Interceptor 2 we need to call the next method then only the request will be forwarded to server now the server is is going to receive the modified request and based on that modified request the server is going to send us the response okay and also remember that we can also modify the response we can manipulate the response once it is received at the client using interceptors before using it in our application so this is the basic idea of how an Interceptor Works let's try to understand it programatically let's go to vs code and there inside this Services folder I'm going to create a new file and I'm going to call it o Interceptor okay and remember that an Interceptor is nothing but a service so here we are going to create an Interceptor service and the file extension is going to be TS now inside this file let's create and Export a class and let's call this class Au Interceptor service and since it is a Serv service class let's also decorate it with at injectable decorator and to use this at injectable decorator we also need to import it from angular / go okay now to this injectable decorator let's pass an object and there let's set the provided in property to root so this is how we create a service class right but since we are creating an Interceptor here we don't need to decorate this Au Interceptor service with this at injectable actually we can decorate it but we don't need to specify this provided in property so I can remove this object from here and I'll tell you why we are doing this now inside this service class we are also not going to use any other service so if we want we can also remove this at injectable okay now when we are creating an intercept C ctor this class this Interceptor service class it must implement the HTTP Interceptor interface so here let's write the Implement statement and it must Implement HTTP Interceptor now in order to use this HTTP Interceptor we need to import it from angular / common SL HTTP okay now since we are implementing this HTTP in Interceptor interface it forces us to implement a method called intercept now this intercept method it is going to receive two parameters first it is going to receive the request object and here the type of this request object will be HTTP request and to use this HTTP request again we need to import it from angular / common SL HTTP now this HTTP request it is of generic type and it tells angular what type of data that request will emit we will keep it as any because we want to apply this Interceptor on every request no matter what type of data that request will emit then the second argument is the next and this next it is of type HTTP Handler and again in order to use this HTTP Handler so this H should be caps here and in order to use this HTTP Handler we need to import it from angular /c/ HTTP now inside this Interceptor method we can write some logic to manipulate the request object before it is sent to the server but for now what we will do is we will simply write a console.log statement and there we will say Au Interceptor called and then as I mentioned earlier we also need to call this next function so from here we are going to call next and actually on this next we have a handle method that's what we need to call here and then we also need to return from here and to this handle method we need to specify the request which we want to return currently we want to return the same request in this method currently we are not modifying the request so we are not returning any modified request instead we are returning the original request okay with this let's save this file this service file now we need to provide this service in the providers array in app module so let's go to app module. TS there we have this providers array now currently from within this providers array we are not providing any service because all the services which we have created so far there we are using this at injectable decorator and from there only we are providing it from root right but we are not doing that for this o Interceptor service that's because we need to provide an Interceptor service in a special way so if I go to app module. TS there we are going to provide that service now how we are going to provide that service there instead of specifying the service class name we are going to use an object there we need to specify this provide and to this provide we need to specify an injection token so in the services lecture we learned that when we specify a service like this for example here if I specify Au Interceptor service like this in that case the injection token will be Au Interceptor service and based on the injection token only the services gets provided right that's what we have learned but here we want to provide an Interceptor service and in order to provide an interceptor service we need to use a special type of injection token there we cannot use the Interceptor service class name so here I'm going to specify an object in that object we need to specify provide and this provide is going to store the injection token name and here the injection token name is httpcore Interceptor okay and to use this httpcore Interceptor we need to import it from angular / common HTTP and here this HTTP Interceptor this name should not come within single quotes it should be used like this then we also need to specify which class do we want to use for this HTTP Interceptor injection token so here we will use this use class property and there we will specify the service class name so in this case the service class name is au Interceptor service let's specify that here then there is one more property which we need to set that is multi because in our application we can have multiple interceptors and each Interceptor will have this same token key this HTTP Interceptor so here we do not want to override the previous Interceptor with new one that's why we need to set this multitude true because when we set this multi to true in that case we can have multiple providers with the same injection token all right here let me move it to a separate line so that it becomes more readable all right with this let's save the changes so now what will happen is whenever a new request is sent from this angular application angular will run the registered Interceptor and execute the logic written inside The Intercept method currently we have only registered one Interceptor this o Interceptor so whenever we send a request from our angular application this intercept method will be called and this logic will be executed let's see that in action so let's go to our application and here we have an error which says the HTTP Interceptor was not found in angular /c/ HTTP that's because it's HTTP interceptors and not Interceptor this should be interceptors and same thing here also we need to use let's say save the changes now let's go to application and that error should be gone so here let me open developer console let's clear the console tab here now let's go ahead and let's make a post request for that I'm going to click on this create task button and here let's try to create a task let's say demo task one let's add some description and let's click on this create task button and you will see that here we can see that message Au Interceptor called currently we made a post request now if I make a get request by clicking on this fetch tasks button again you will see that message Au Interceptor called because when we made a request the Au Interceptor were executed and from there we are logging this message in the same way if I delete this task in that case a delete request will be sent so when the delete request will be sent at that time also the Au inter ctor will be executed and you can see at that time also this Au Interceptor called has been logged so now for each request we make from our application this Au Interceptor will be called now a very important point to note here is that you must call this next. handle function from within your intercept method otherwise the request will never move to the next step it will never be forwarded to the next Interceptor or to the server if I don't call this next. handle the request will always stay here in this intercept method it will not get forwarded to the next Interceptor if we have any or to the server so this is very important to note here now if you want to control the execution of Interceptor for certain requests you can do that by adding if check and compare the URL from the request object so for example what you can do is you can write an if statement here and on the request object you have a URL property which will give you the URL of the request so you can do the check for the URL and if you don't want to execute this Logic for that URL here you can do not equal to and specify the URL and then write this logic inside this if statement okay but here I'm not going to do that I want to execute this Logic for all types of request so so this is how we can create an Interceptor now currently in this Interceptor we are simply logging a message we are not manipulating the request or response let's do that in our next lecture

Channel: procademy

Views: 9,694

Keywords: httpClient, hettp get, http angular, fetch data from server, angular, angular tutorial, complete angular course

Id: w1_AmHv2LmA

Length: 14min 21sec (861 seconds)

Published: Wed Feb 07 2024