279. Multiple Interceptors

Jul 21, 2026 06:01 · 4:52 · English · Whisper Turbo · 2 اسپیکر

یہ نقل ختم ہو جاتا ہے 7 دن. دائمی محفوظہ کے لئے بہتری →

ليکشن

0:01

S… Speaker 1 (279. Multiple Interceptors)

Now to finish up this topic on intersetters,

0:04

S… Speaker 1 (279. Multiple Interceptors)

and by the way,

0:05

S… Speaker 1 (279. Multiple Interceptors)

we'll see intersetters again in the authentication section of this course,

0:09

S… Speaker 1 (279. Multiple Interceptors)

but to wrap it up for now,

0:11

S… Speaker 1 (279. Multiple Interceptors)

let's add a second intersetter.

0:13

S… Speaker 1 (279. Multiple Interceptors)

Because you're not limited to one,

0:15

S… Speaker 1 (279. Multiple Interceptors)

you can add as many as you want.

0:16

S… Speaker 1 (279. Multiple Interceptors)

I'll name this one logging intersetter because I only

0:20

S… Speaker 1 (279. Multiple Interceptors)

want to do some logging here.

0:21

S… Speaker 1 (279. Multiple Interceptors)

And therefore the file name is logging -intersetter

0:26

S… Speaker 2 (279. Multiple Interceptors)

.service .ts.

0:28

S… Speaker 2 (279. Multiple Interceptors)

And there,

0:29

S… Speaker 1 (279. Multiple Interceptors)

we now will create a new intersetter.

0:30

S… Speaker 1 (279. Multiple Interceptors)

Feel free to pause the video at this point and try it on your own,

0:34

S… Speaker 1 (279. Multiple Interceptors)

of course.

0:34

S… Speaker 2 (279. Multiple Interceptors)

You do create it by

0:39

S… Speaker 1 (279. Multiple Interceptors)

exporting a class,

0:40

S… Speaker 1 (279. Multiple Interceptors)

which you should name appropriately,

0:42

S… Speaker 1 (279. Multiple Interceptors)

like logging intersetter service.

0:49

S… Speaker 1 (279. Multiple Interceptors)

This has to implement the HTTP intersetter interface,

0:53

S… Speaker 1 (279. Multiple Interceptors)

which you import from at Angular common HTTP.

0:56

S… Speaker 1 (279. Multiple Interceptors)

This forces you to add an interset method,

0:59

S… Speaker 1 (279. Multiple Interceptors)

which then in turn gets a request,

1:02

S… Speaker 1 (279. Multiple Interceptors)

which is of type HTTP request and which gets this next

1:06

S… Speaker 1 (279. Multiple Interceptors)

object function thing,

1:08

S… Speaker 1 (279. Multiple Interceptors)

which is of type HTTP handler.

1:10

S… Speaker 1 (279. Multiple Interceptors)

And there you should return next handle as you learned.

1:15

S… Speaker 1 (279. Multiple Interceptors)

And since HTTP request is generic,

1:17

S… Speaker 1 (279. Multiple Interceptors)

you should also add angle brackets there and define the type of data it

1:21

S… Speaker 1 (279. Multiple Interceptors)

will eventually wrap.

1:22

S… Speaker 1 (279. Multiple Interceptors)

Now to next handle,

1:24

S… Speaker 1 (279. Multiple Interceptors)

you also have to pass your request then.

1:25

S… Speaker 2 (279. Multiple Interceptors)

This is a basic interest setter,

1:27

S… Speaker 1 (279. Multiple Interceptors)

but of course it's not doing any logging,

1:29

S… Speaker 1 (279. Multiple Interceptors)

which it should if we have a look at the name.

1:31

S… Speaker 1 (279. Multiple Interceptors)

So here I will now do some logging and of course log whatever you

1:35

S… Speaker 1 (279. Multiple Interceptors)

want here.

1:36

S… Speaker 2 (279. Multiple Interceptors)

So here I'll just log

1:40

S… Speaker 1 (279. Multiple Interceptors)

outgoing request.

1:43

S… Speaker 1 (279. Multiple Interceptors)

and maybe also the url though you could of course

1:47

S… Speaker 1 (279. Multiple Interceptors)

also log the headers or whatever you want and on the response i will

1:52

S… Speaker 1 (279. Multiple Interceptors)

now again pipe the tab operator which is imported

1:56

S… Speaker 1 (279. Multiple Interceptors)

from rxjs operators where i got the event

2:03

S… Speaker 1 (279. Multiple Interceptors)

And here we could now log all events again,

2:06

S… Speaker 1 (279. Multiple Interceptors)

but I only care about the response.

2:08

S… Speaker 1 (279. Multiple Interceptors)

So I'll compare the event type to HTTP event

2:12

S… Speaker 1 (279. Multiple Interceptors)

type response.

2:13

S… Speaker 1 (279. Multiple Interceptors)

And in there we can console log incoming

2:17

S… Speaker 1 (279. Multiple Interceptors)

response and also console

2:22

S… Speaker 1 (279. Multiple Interceptors)

log the event body.

2:23

S… Speaker 1 (279. Multiple Interceptors)

So the response body,

2:24

S… Speaker 1 (279. Multiple Interceptors)

if you want to.

2:25

S… Speaker 1 (279. Multiple Interceptors)

Now it's a very simple logging interceptor.

2:28

S… Speaker 1 (279. Multiple Interceptors)

In the off interceptor,

2:29

S… Speaker 1 (279. Multiple Interceptors)

I'll therefore get rid of that extra logging I'm doing here.

2:33

S… Speaker 1 (279. Multiple Interceptors)

So I'll get rid of that pipe method and just return the modified request.

2:37

S… Speaker 2 (279. Multiple Interceptors)

I'll also not log these two statements here.

2:41

S… Speaker 1 (279. Multiple Interceptors)

so that I have a leaner intersetter here.

2:43

S… Speaker 1 (279. Multiple Interceptors)

So this intersetter is now only attaching the auth header and

2:47

S… Speaker 1 (279. Multiple Interceptors)

the other intersetter is responsible for logging.

2:50

S… Speaker 1 (279. Multiple Interceptors)

Now we just need to add them both.

2:52

S… Speaker 1 (279. Multiple Interceptors)

And now here comes something super important.

2:54

S… Speaker 1 (279. Multiple Interceptors)

The order in which you provide them matters because

2:58

S… Speaker 1 (279. Multiple Interceptors)

that will be the order in which they are executed.

3:01

S… Speaker 1 (279. Multiple Interceptors)

So in the app module here,

3:03

S… Speaker 2 (279. Multiple Interceptors)

of course,

3:04

S… Speaker 1 (279. Multiple Interceptors)

we provide the other intersetter,

3:06

S… Speaker 1 (279. Multiple Interceptors)

the logging intersetter by simply repeating this object.

3:09

S… Speaker 1 (279. Multiple Interceptors)

in that providers array.

3:10

S… Speaker 1 (279. Multiple Interceptors)

And here you now point at that logging intersetter service,

3:14

S… Speaker 1 (279. Multiple Interceptors)

which you have to import.

3:16

S… Speaker 1 (279. Multiple Interceptors)

But now this off intersetter will run first

3:20

S… Speaker 1 (279. Multiple Interceptors)

and thereafter comes the logging intersetter.

3:22

S… Speaker 1 (279. Multiple Interceptors)

Now, often the order might not matter,

3:24

S… Speaker 1 (279. Multiple Interceptors)

but if it does,

3:25

S… Speaker 1 (279. Multiple Interceptors)

be aware of that order and order your intersetters accordingly

3:30

S… Speaker 1 (279. Multiple Interceptors)

so that the order in which they execute fits your use case

3:34

S… Speaker 1 (279. Multiple Interceptors)

and whatever you're doing in your intersetters.

3:36

S… Speaker 1 (279. Multiple Interceptors)

And to prove that order thing in the logging intersetter,

3:39

S… Speaker 1 (279. Multiple Interceptors)

I'll actually also console log the request headers because

3:44

S… Speaker 1 (279. Multiple Interceptors)

there, since the logging intersetter comes second,

3:47

S… Speaker 2 (279. Multiple Interceptors)

we should see that custom key,

3:49

S… Speaker 1 (279. Multiple Interceptors)

this off key being added.

3:52

S… Speaker 1 (279. Multiple Interceptors)

So now with that,

3:53

S… Speaker 1 (279. Multiple Interceptors)

if we save that,

3:53

S… Speaker 1 (279. Multiple Interceptors)

let me clear the console and fetch it again.

3:58

S… Speaker 2 (279. Multiple Interceptors)

We see outgoing requests and the URL.

4:00

S… Speaker 1 (279. Multiple Interceptors)

We see the headers and in there,

4:03

S… Speaker 2 (279. Multiple Interceptors)

indeed,

4:04

S… Speaker 1 (279. Multiple Interceptors)

we have that auth thing with the value of XYZ.

4:09

S… Speaker 1 (279. Multiple Interceptors)

And we have incoming response and we see the response body.

4:13

S… Speaker 1 (279. Multiple Interceptors)

And now to really prove that order thing,

4:15

S… Speaker 1 (279. Multiple Interceptors)

remember that here we see off XYZ.

4:18

S… Speaker 1 (279. Multiple Interceptors)

Now,

4:19

S… Speaker 1 (279. Multiple Interceptors)

I guess you can already imagine what will happen if I switch

4:23

S… Speaker 1 (279. Multiple Interceptors)

the order here and we log first and thereafter we add the key.

4:27

S… Speaker 2 (279. Multiple Interceptors)

Well,

4:28

S… Speaker 1 (279. Multiple Interceptors)

if we do that and I clear that and then I fetch.

4:31

S… Speaker 2 (279. Multiple Interceptors)

Then of course,

4:32

S… Speaker 2 (279. Multiple Interceptors)

you see, we still log the same as before,

4:34

S… Speaker 1 (279. Multiple Interceptors)

but if we inspect our headers,

4:36

S… Speaker 2 (279. Multiple Interceptors)

here,

4:37

S… Speaker 1 (279. Multiple Interceptors)

we only got that custom header,

4:38

S… Speaker 1 (279. Multiple Interceptors)

which we're not setting in an intersetter,

4:40

S… Speaker 1 (279. Multiple Interceptors)

we're missing the off header though.

4:43

S… Speaker 1 (279. Multiple Interceptors)

So the order matters,

4:45

S… Speaker 1 (279. Multiple Interceptors)

but other than that,

4:46

S… Speaker 1 (279. Multiple Interceptors)

providing multiple intersetters is extremely simple,

4:49

S… Speaker 1 (279. Multiple Interceptors)

as you can tell.

یہ نقل AI (خودکار بولنے کی پہچان) سے بنائی گئی تھی. غلطیاں ہو سکتے ہیں - اہم استعمال کے لیے اصل آڈیو کے مقابلے میں جانچیں. AI پالیسي

❤️ STT.ai سے محبت؟ اپنے دوستوں کو بتاؤ۔

خلاصہ

اس نقل کا AI خلاصہ پیدا کرنے کے لئے خلاصہ کرو کلک کریں.

اس نقل کے بارے ميں AI سے پوچھو

اس نقل کے بارے میں کچھ پوچھو - AI متعلقہ حصوں کو تلاش کرے گا اور جواب دے گا۔

دوسرا نقل کریں