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 тұжырымын құру үшін Тұжырымдау дегенді басыңыз.

Бұл транскрипт туралы ДК- дан сұрау

Бұл транскрипт туралы сұрақ қойыңыз - ИИ тиісті бөлімдерді тауып, жауап береді.

Басқасын көшіру