274. Observing Different Types of Responses

0:01

S… Speaker 1 (274. Observing Different Types of Responses)

Thus far,

0:02

S… Speaker 1 (274. Observing Different Types of Responses)

we always were only interested in the response data

0:06

S… Speaker 1 (274. Observing Different Types of Responses)

of our request,

0:08

S… Speaker 1 (274. Observing Different Types of Responses)

right?

0:08

S… Speaker 1 (274. Observing Different Types of Responses)

For example, when we fetch the posts,

0:10

S… Speaker 1 (274. Observing Different Types of Responses)

we get the response data,

0:12

S… Speaker 1 (274. Observing Different Types of Responses)

we map that and we return the subscription and then we use that data in the

0:16

S… Speaker 1 (274. Observing Different Types of Responses)

component.

0:16

S… Speaker 1 (274. Observing Different Types of Responses)

Nothing wrong with that and absolutely what we need here.

0:20

S… Speaker 1 (274. Observing Different Types of Responses)

But sometimes you need access to the entire response object and

0:24

S… Speaker 1 (274. Observing Different Types of Responses)

not just to the extracted body data.

0:26

S… Speaker 1 (274. Observing Different Types of Responses)

Sometimes you need to find out which status code was attached or you need some response

0:30

S… Speaker 1 (274. Observing Different Types of Responses)

headers.

0:31

S… Speaker 1 (274. Observing Different Types of Responses)

And in such cases,

0:33

S… Speaker 1 (274. Observing Different Types of Responses)

you can change the way the Angular HTTP

0:37

S… Speaker 1 (274. Observing Different Types of Responses)

client parses that response and you can basically tell Angular,

0:41

S… Speaker 1 (274. Observing Different Types of Responses)

hey, please don't give me the unpacked,

0:45

S… Speaker 1 (274. Observing Different Types of Responses)

the extracted response data you found in the body.

0:47

S… Speaker 1 (274. Observing Different Types of Responses)

Give me the full response instead.

0:50

S… Speaker 1 (274. Observing Different Types of Responses)

And let's do that for sending a post request,

0:52

S… Speaker 1 (274. Observing Different Types of Responses)

for example.

0:53

S… Speaker 1 (274. Observing Different Types of Responses)

You do that by adding this extra argument to configure the request,

0:57

S… Speaker 1 (274. Observing Different Types of Responses)

and here I won't set any headers or params.

1:00

S… Speaker 1 (274. Observing Different Types of Responses)

Instead here,

1:01

S… Speaker 1 (274. Observing Different Types of Responses)

we can change the observe.

1:05

S… Speaker 1 (274. Observing Different Types of Responses)

key here.

1:06

S… Speaker 1 (274. Observing Different Types of Responses)

Observe takes a couple of values and IntelliSense here

1:10

S… Speaker 1 (274. Observing Different Types of Responses)

incorrectly shows that I can only set body.

1:12

S… Speaker 1 (274. Observing Different Types of Responses)

That actually is the default.

1:14

S… Speaker 1 (274. Observing Different Types of Responses)

And body means that you get that response data extracted

1:19

S… Speaker 1 (274. Observing Different Types of Responses)

and converted to a JavaScript object automatically.

1:22

S… Speaker 1 (274. Observing Different Types of Responses)

But you don't have to stick to body.

1:24

S… Speaker 1 (274. Observing Different Types of Responses)

You can,

1:25

S… Speaker 1 (274. Observing Different Types of Responses)

for example, also change this to response.

1:27

S… Speaker 1 (274. Observing Different Types of Responses)

By the way,

1:29

S… Speaker 1 (274. Observing Different Types of Responses)

you should get an error if you enter something incorrect,

1:31

S… Speaker 1 (274. Observing Different Types of Responses)

but response is supported.

1:33

S… Speaker 2 (274. Observing Different Types of Responses)

Now,

1:34

S… Speaker 1 (274. Observing Different Types of Responses)

let's see what this is.

1:35

S… Speaker 1 (274. Observing Different Types of Responses)

We are already logging the response data or whatever we get back

1:40

S… Speaker 1 (274. Observing Different Types of Responses)

here in the console,

1:41

S… Speaker 1 (274. Observing Different Types of Responses)

so we should see that when we add a new post.

1:45

S… Speaker 1 (274. Observing Different Types of Responses)

So let's simply enter some content here.

1:47

S… Speaker 1 (274. Observing Different Types of Responses)

Doesn't matter.

1:47

S… Speaker 1 (274. Observing Different Types of Responses)

Let's send that post.

1:49

S… Speaker 1 (274. Observing Different Types of Responses)

And now you see you get back the full HTTP response object.

1:53

S… Speaker 1 (274. Observing Different Types of Responses)

You have the body in there.

1:55

S… Speaker 1 (274. Observing Different Types of Responses)

And conveniently,

1:56

S… Speaker 1 (274. Observing Different Types of Responses)

this still already was parsed and converted to a JavaScript

2:00

S… Speaker 1 (274. Observing Different Types of Responses)

object for you.

2:01

S… Speaker 1 (274. Observing Different Types of Responses)

But if you wanted to access it,

2:03

S… Speaker 1 (274. Observing Different Types of Responses)

you would now have to access it by typing response data body

2:07

S… Speaker 1 (274. Observing Different Types of Responses)

here. And you even get autocompletion because TypeScript understands that we

2:11

S… Speaker 1 (274. Observing Different Types of Responses)

request the full response here.

2:13

S… Speaker 1 (274. Observing Different Types of Responses)

So you still have access to the body,

2:15

S… Speaker 1 (274. Observing Different Types of Responses)

but now you also have access to the headers of the response,

2:19

S… Speaker 1 (274. Observing Different Types of Responses)

to the status code,

2:21

S… Speaker 1 (274. Observing Different Types of Responses)

the status text,

2:22

S… Speaker 1 (274. Observing Different Types of Responses)

if it was okay,

2:23

S… Speaker 1 (274. Observing Different Types of Responses)

which will be true if the status code is in the 200 XX

2:28

S… Speaker 1 (274. Observing Different Types of Responses)

region.

2:28

S… Speaker 1 (274. Observing Different Types of Responses)

So if it's not a 400 or 500 status code,

2:32

S… Speaker 1 (274. Observing Different Types of Responses)

and that can be more useful in some scenarios where you maybe

2:36

S… Speaker 1 (274. Observing Different Types of Responses)

don't care about the body or not only about the body,

2:39

S… Speaker 1 (274. Observing Different Types of Responses)

but you actually want more information than just that.

2:43

S… Speaker 1 (274. Observing Different Types of Responses)

With observe,

2:44

S… Speaker 1 (274. Observing Different Types of Responses)

you can change the kind of data you get back.

2:46

S… Speaker 2 (274. Observing Different Types of Responses)

Now,

2:47

S… Speaker 1 (274. Observing Different Types of Responses)

this is how you observe the response.

2:49

S… Speaker 1 (274. Observing Different Types of Responses)

You can also observe something different.

2:53

S… Speaker 1 (274. Observing Different Types of Responses)

So here,

2:54

S… Speaker 1 (274. Observing Different Types of Responses)

when we delete posts,

2:55

S… Speaker 1 (274. Observing Different Types of Responses)

I will use observe again.

2:57

S… Speaker 1 (274. Observing Different Types of Responses)

And I mentioned that body would be the default and that extracts the

3:01

S… Speaker 1 (274. Observing Different Types of Responses)

response body and converts it to JavaScript.

3:03

S… Speaker 1 (274. Observing Different Types of Responses)

You also have response as you learned.

3:05

S… Speaker 2 (274. Observing Different Types of Responses)

Now,

3:06

S… Speaker 1 (274. Observing Different Types of Responses)

you also have events.

3:08

S… Speaker 2 (274. Observing Different Types of Responses)

Now,

3:08

S… Speaker 1 (274. Observing Different Types of Responses)

what is events?

3:10

S… Speaker 1 (274. Observing Different Types of Responses)

Let's simply have a look at this events thing by using

3:14

S… Speaker 1 (274. Observing Different Types of Responses)

one other operator,

3:16

S… Speaker 1 (274. Observing Different Types of Responses)

which we can chain in here.

3:17

S… Speaker 1 (274. Observing Different Types of Responses)

And we import that from RxJS operators,

3:20

S… Speaker 1 (274. Observing Different Types of Responses)

and that's the tab operator.

3:21

S… Speaker 1 (274. Observing Different Types of Responses)

And that simply allows us to execute some code without altering

3:26

S… Speaker 1 (274. Observing Different Types of Responses)

the response so that we basically just can do something with

3:30

S… Speaker 1 (274. Observing Different Types of Responses)

the response,

3:31

S… Speaker 1 (274. Observing Different Types of Responses)

but not disturb our subscribe function and the functions we passed

3:35

S… Speaker 1 (274. Observing Different Types of Responses)

as arguments to subscribe.

3:36

S… Speaker 1 (274. Observing Different Types of Responses)

So here I simply pipe

3:40

S… Speaker 1 (274. Observing Different Types of Responses)

tap in there,

3:41

S… Speaker 1 (274. Observing Different Types of Responses)

I get my event,

3:44

S… Speaker 1 (274. Observing Different Types of Responses)

presumably,

3:45

S… Speaker 1 (274. Observing Different Types of Responses)

since we observe events here,

3:46

S… Speaker 1 (274. Observing Different Types of Responses)

and I can console log this,

3:48

S… Speaker 1 (274. Observing Different Types of Responses)

and you don't need to return anything or anything like that.

3:51

S… Speaker 1 (274. Observing Different Types of Responses)

It won't interrupt the normal observable data

3:55

S… Speaker 1 (274. Observing Different Types of Responses)

flow.

3:55

S… Speaker 1 (274. Observing Different Types of Responses)

It just taps in there,

3:56

S… Speaker 1 (274. Observing Different Types of Responses)

allows you to do something,

3:58

S… Speaker 1 (274. Observing Different Types of Responses)

but then automatically lets the response pass through,

4:02

S… Speaker 1 (274. Observing Different Types of Responses)

so to say.

4:02

S… Speaker 1 (274. Observing Different Types of Responses)

So let's see what that gives us.

4:05

S… Speaker 1 (274. Observing Different Types of Responses)

If I now click clear posts,

4:08

S… Speaker 1 (274. Observing Different Types of Responses)

We see we get two outputs now and these outputs stem

4:12

S… Speaker 1 (274. Observing Different Types of Responses)

from posts service line 70,

4:14

S… Speaker 1 (274. Observing Different Types of Responses)

which clearly is this console log.

4:16

S… Speaker 1 (274. Observing Different Types of Responses)

So it seems like we got two events here.

4:19

S… Speaker 1 (274. Observing Different Types of Responses)

The first one logs an empty object or an

4:23

S… Speaker 1 (274. Observing Different Types of Responses)

almost empty object where we have type zero and the second

4:27

S… Speaker 1 (274. Observing Different Types of Responses)

one is the HTTP response object.

4:30

S… Speaker 1 (274. Observing Different Types of Responses)

In the end,

4:31

S… Speaker 1 (274. Observing Different Types of Responses)

you have different type of events and they are encoded with numbers.

4:35

S… Speaker 1 (274. Observing Different Types of Responses)

However,

4:35

S… Speaker 1 (274. Observing Different Types of Responses)

here in code,

4:36

S… Speaker 1 (274. Observing Different Types of Responses)

you don't have to use these numbers.

4:38

S… Speaker 1 (274. Observing Different Types of Responses)

You have a more convenient way.

4:39

S… Speaker 1 (274. Observing Different Types of Responses)

We can check event type.

4:44

S… Speaker 1 (274. Observing Different Types of Responses)

and compare this to HTTP event type,

4:47

S… Speaker 1 (274. Observing Different Types of Responses)

which is an enum you can import from at Angular slash

4:51

S… Speaker 1 (274. Observing Different Types of Responses)

comment slash HTTP.

4:52

S… Speaker 1 (274. Observing Different Types of Responses)

This is supported in TypeScript only,

4:55

S… Speaker 1 (274. Observing Different Types of Responses)

and for JavaScript,

4:56

S… Speaker 1 (274. Observing Different Types of Responses)

this in the end just is a map of numbers,

4:58

S… Speaker 1 (274. Observing Different Types of Responses)

so of zero and so on,

5:00

S… Speaker 1 (274. Observing Different Types of Responses)

and it understands which type of event,

5:02

S… Speaker 1 (274. Observing Different Types of Responses)

so which number here stands for which internal type of event.

5:06

S… Speaker 1 (274. Observing Different Types of Responses)

But here we have a more human readable way,

5:08

S… Speaker 1 (274. Observing Different Types of Responses)

because now if you type a dot here,

5:10

S… Speaker 1 (274. Observing Different Types of Responses)

you see the different translations.

5:12

S… Speaker 1 (274. Observing Different Types of Responses)

Now, these are just the responses for the numbers you see in

5:16

S… Speaker 1 (274. Observing Different Types of Responses)

that log here.

5:17

S… Speaker 1 (274. Observing Different Types of Responses)

And you can actually see that here in the preview.

5:20

S… Speaker 1 (274. Observing Different Types of Responses)

You see, for example,

5:21

S… Speaker 1 (274. Observing Different Types of Responses)

response has a type of four by the look of it.

5:24

S… Speaker 1 (274. Observing Different Types of Responses)

This is simply number four encoded in more human readable text.

5:28

S… Speaker 1 (274. Observing Different Types of Responses)

And again,

5:29

S… Speaker 1 (274. Observing Different Types of Responses)

that's a TypeScript only feature.

5:30

S… Speaker 1 (274. Observing Different Types of Responses)

It is compiled to just that number comparison in the end.

5:34

S… Speaker 1 (274. Observing Different Types of Responses)

And you see that,

5:35

S… Speaker 1 (274. Observing Different Types of Responses)

for example, sent has that number of zero.

5:38

S… Speaker 1 (274. Observing Different Types of Responses)

So it looks like we had the sent event first and then we had the response event

5:42

S… Speaker 1 (274. Observing Different Types of Responses)

and that was all the log.

5:44

S… Speaker 1 (274. Observing Different Types of Responses)

There are other events too,

5:46

S… Speaker 1 (274. Observing Different Types of Responses)

which didn't kick in here.

5:48

S… Speaker 1 (274. Observing Different Types of Responses)

For example, when you're uploading files,

5:50

S… Speaker 1 (274. Observing Different Types of Responses)

you would get back some progress information about that file upload,

5:54

S… Speaker 1 (274. Observing Different Types of Responses)

how it is going and so on.

5:56

S… Speaker 1 (274. Observing Different Types of Responses)

So here,

5:57

S… Speaker 1 (274. Observing Different Types of Responses)

if you ever,

5:58

S… Speaker 1 (274. Observing Different Types of Responses)

for example, want to check,

5:59

S… Speaker 1 (274. Observing Different Types of Responses)

yeah, did I get back the response?

6:01

S… Speaker 1 (274. Observing Different Types of Responses)

Then you can just compare the event type to this event

6:06

S… Speaker 1 (274. Observing Different Types of Responses)

type.

6:06

S… Speaker 1 (274. Observing Different Types of Responses)

So to this number and see,

6:08

S… Speaker 1 (274. Observing Different Types of Responses)

are we having the response here?

6:10

S… Speaker 1 (274. Observing Different Types of Responses)

And if you do have the response,

6:12

S… Speaker 1 (274. Observing Different Types of Responses)

for example,

6:13

S… Speaker 1 (274. Observing Different Types of Responses)

you could log the event.

6:15

S… Speaker 1 (274. Observing Different Types of Responses)

body because you know okay the event we have here is actually

6:19

S… Speaker 1 (274. Observing Different Types of Responses)

my response object i can safely access the body if you just

6:23

S… Speaker 1 (274. Observing Different Types of Responses)

send this so if the type is equal to http event

6:28

S… Speaker 1 (274. Observing Different Types of Responses)

type sent well then and the

6:32

S… Speaker 1 (274. Observing Different Types of Responses)

typescript is really smart here

6:34

S… Speaker 1 (274. Observing Different Types of Responses)

then you can't access the body.

6:36

S… Speaker 1 (274. Observing Different Types of Responses)

Here you actually have only the type,

6:38

S… Speaker 1 (274. Observing Different Types of Responses)

but you could do something else.

6:39

S… Speaker 1 (274. Observing Different Types of Responses)

You could update something in the UI to basically inform the user that

6:43

S… Speaker 1 (274. Observing Different Types of Responses)

the request was now sent and you're waiting for the response.

6:47

S… Speaker 1 (274. Observing Different Types of Responses)

So that is how you can use these events if you need very

6:51

S… Speaker 1 (274. Observing Different Types of Responses)

granular control over how you update

6:55

S… Speaker 1 (274. Observing Different Types of Responses)

the UI and in which phase your request currently is.

6:59

S… Speaker 1 (274. Observing Different Types of Responses)

So to quickly demonstrate this again.

7:03

S… Speaker 1 (274. Observing Different Types of Responses)

If I now fetch my posts and I now clear them,

7:07

S… Speaker 1 (274. Observing Different Types of Responses)

now we have our different outputs here.

7:10

S… Speaker 1 (274. Observing Different Types of Responses)

And this null statement here,

7:12

S… Speaker 1 (274. Observing Different Types of Responses)

for example, is from me accessing the response body,

7:15

S… Speaker 1 (274. Observing Different Types of Responses)

which here just happens to be null.

7:17

S… Speaker 1 (274. Observing Different Types of Responses)

But if there were one,

7:18

S… Speaker 1 (274. Observing Different Types of Responses)

then we could safely access it here.

7:20

S… Speaker 1 (274. Observing Different Types of Responses)

So these are events,

7:22

S… Speaker 1 (274. Observing Different Types of Responses)

obviously something you'll not use all the time,

7:24

S… Speaker 1 (274. Observing Different Types of Responses)

but can be very helpful if you need fine -grained control over

7:29

S… Speaker 1 (274. Observing Different Types of Responses)

your request status.

274. Observing Different Types of Responses

Resume

Konbyen tan pou m' fè transkript la?