Reading and understanding an observable structure

Question

I'm trying to understand how the observable structure is. And I would like to find where is the response, the error and the complete. I would like to know also where to find in the response, in the case of a POST request, the body and the header part.

So I did a console.log to see the observable:

  login(email: string, password: string) {
    console.log('Obs : ', this.http.post<any>(this._URL, { email: email, password: password }));
  }

And I saw in the console:

But I don't know where to find the part I've explained on top.

The request is never even getting *made*. If you want to look at the value emitted by the observable, you need to use e.g. `.subscribe(value => console.log(value)),`, or `tap` in a `pipe`. Read the docs on the HttpClient: https://angular.io/guide/http — jonrsharpe, Jul 19 '19 at 09:17
This observable will not do anything until something subscribes to it — danimal, Jul 19 '19 at 09:28
For request data (e.g. header) you should consider taking a look into interceptors — MoxxiManagarm, Jul 19 '19 at 10:15

Martin Choraine · Answer 1 · 2019-07-19T09:23:14.580

1

You cannot find the response in Observable structure.

First your http call will not be execute until you subscribe() the observable :

 login(email: string, password: string) {
    this.http.post<any>(this._URL, { email: email, password: password }, {observe: 'response'}).subscribe((res) => console.log(res));
  }

edited Jul 19 '19 at 09:23

answered Jul 19 '19 at 09:18

Martin Choraine

2,296
3
20
37

1

He asks to see the headers as well, this only shows the body – Gilsido Jul 19 '19 at 09:21

Gilsido · Accepted Answer · 2019-07-19T09:47:28.163

1

If I understand correctly you want the header and body of the http post response? I advise you take a look at Read response headers from API response - Angular 5 + TypeScript, basically:

    this.http.post<any>(this._URL, { email: email, password: password }, { observe: 'response' }).subscribe(response => {
     console.log("These are my headers: ", response.headers)
     console.log("This is my body: ", response.body)
    });

edited Jul 19 '19 at 09:47

answered Jul 19 '19 at 09:19

Gilsido

542
1
3
11

1

Why, for ```console.log("These are my headers: " + response.headers)``` I get in the console ```These are my headers: [object Object]``` ? – JBD Jul 19 '19 at 09:41
Because header is an array and I'm stupid, adding an array to a string casts it as a string in `[object Object]` try `console.log("These are my headers: ", response.headers)` instead ^^ – Gilsido Jul 19 '19 at 09:44
I got the header but it still very confusing to navigate in it to see if the data I'm looking for are in. I've read the article you have gave in link, and I get 'Null' for the data. So that's why I wanted to go "by hand clicking" to see if i have them :) – JBD Jul 19 '19 at 10:34
`const keys = resp.headers.keys(); console.log("These are my headers: ", keys.map(key => \`${key}: ${resp.headers.get(key)}\`));` will probably give you a more easily readable array – Gilsido Jul 19 '19 at 11:03
I had also to add in SPRING BOOT ```configuration.setExposedHeaders(Arrays.asList("Authorization, Cache-Control, Content-Type, UserID"));``` as it was explained in your link. Thanks so much for all your help – JBD Jul 19 '19 at 17:07

Reading and understanding an observable structure

2 Answers2