7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

7.4 Intercepting Requests

In this lesson I'll show you how to create an HTTP interceptor which can be used to intercept any HTTP request made in the app. This lets you modify the requests or responses on the fly.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


7.4 Intercepting Requests

Hi folks. In this lesson, we're gonna take a look at how we can intercept any HTTP requests that are made anywhere in our application, so that we can inspect and perhaps even modify the request or response. HTTP interceptors follow the same middleware pattern that is used in common Node frameworks like Express.js. Well, we can have a chain of interceptors, and any request will be passed through each of them with each interceptor in the chain doing something with the request and then passing it along to the next interceptor. In last lesson, we added the x-requested-with header to the request to the numbers API. This is the only request that we'll be making in the application. But just imagine that we were making lots and lots of requests from many different places within the application. If we wanted to set this header on all of our requests, we have two options really. We can find and modify every single HTTP request all over the application and set the header manually in all of them, resulting in lots of duplicate code throughout the application. Or we could use a single interceptor which modifies any request from the app and sets the header. Then we only have one instance of the header setting code. I know which I'd prefer to do. So let's make use of an HTTP interceptor to set our header. An interceptor is basically a service, but we can't use the CLI to automatically generate one for us. So let's just create a new typescript file in our _services folder. We'll call this one requested-with-header.interceptor.ts. So we're keeping with the usual Angular naming convention for our file, and that consists of a name which indicates what the file is for followed by a dot followed by the type of thing that it is, in this case an interceptor. So we can import the injectable decorator as befits an Angular service. There's also a bunch of things that we'll need specifically for an HTTP interceptor that we need to import. And just for typing purposes, let's import the observable class from our XJS. So now let's define the class for the interceptor. We can decorate it with the injectable decorator and it should implement the HTTP interceptor interface. In order to implement the HTTP interceptor interface correctly, the interceptor must define a method called intercept. The method will return an observable, just like the HTTP methods of the HTTP client. But it will be an observable of an HTTP event rather than an observable of an HTTP response. The event may be for any type of response, and the method will accept two parameters. The first is an object which represents the request. This has a type of HttpRequest, and it may be any type of HttpRequest. The method will also be passed a class called next, which is of the type HttpHandler. The method will also be passed a function called next, which is of the type HttpHandler. So inside the method, then, we can do what we need to do. In this case, we can set the header, although we do have a slight conundrum here. The request objects passed to the interceptor will already have a headers property, and as we already know, the headers are immutable, so we can't just set them. The headers property of the request is read-only as well. So we can't even replace the existing headers with some new ones. And we wouldn't want to do that anyway, as we would have to save any that were already set and make sure they got added to the new headers objects. So instead, the request object has a special method called clone. We can pass an object to this method containing any properties of the request that we want to modify, and Angular will take care of applying the changes to the request. The method returns a modified request object, so we need to make sure that we store this. So we invoke the clone method of the request and we pass it an object. One of the keys within that object is called headers. So we're telling Angular that we want to set some new headers on the cloned version of the request. And in this case, we just want to set the x-requested-with header that we were setting previously. So we've still got some red underlining in the editor here, and that's because the method should be returning an observable. So we can fix that using the next handler that gets passed to the intercept method. The next object has a method called handle and we can pass the modified request object to that method and Angular will take care of passing the modified request onto either the next interceptor in the chain or the HTTP client, if there are no more interceptors. Great, so now we just need to make use of our new interceptor. So this needs to be imported into the same place as the HTTP client is imported, which for us is in our app.module.ts file. And we'll also need to import the collection of HTTP interceptors from Angular. The interceptor needs to be provided but we can't just add it to the providers array in the way that we have been doing previously. We need to use the HTTP interceptors injection token that we just imported. We use an object with the keys provide, useClass, and multi. And what we're saying here, basically, is that anytime Angular injects the collection of HTTP interceptors, it should include our requested-with header interceptor. Multi is set to true to tell Angular the HTTP interceptors token represents a collection of items rather than a single service. So now let's delete where we set the header previously in the game service. And now let's go back to the browser and check that the interceptor is working as expected. And let's take a look at the second item. And we can see that the x-requested-with header is still being set, and we know now that that's coming from the interceptor rather than the site of the original request. So, if we were making 10 or 15 or even 50 other HTTP requests around the application, they would all have this x-requested-with header and we wouldn't need to go through and manually update every single request. So in this lesson we saw how to create an HTTP interceptor. HTTP interceptors form a chain, with each interceptor receiving a request, potentially modifying it, and then passing this request along to the next interceptor in the chain. An HTTP interceptor can be used for many things. In this example, we used it to add a simple request header and we saw that this header will now get applied to every single request made throughout the application. Thanks for watching.

Back to the top