angular获取请求头,Angular 4.3.3 HttpClient：如何从响应的头部获取值？

( Editor: VS Code; Typescript: 2.2.1 )

The purpose is to get the headers of the response of the request

Assume a POST request with HttpClient in a Service

import {

Injectable

} from "@angular/core";

import {

HttpClient,

HttpHeaders,

} from "@angular/common/http";

@Injectable()

export class MyHttpClientService {

const url = 'url';

const body = {

body: 'the body'

};

const headers = 'headers made with HttpHeaders';

const options = {

headers: headers,

observe: "response", // to display the full response

responseType: "json"

};

return this.http.post(sessionUrl, body, options)

.subscribe(response => {

console.log(response);

return response;

}, err => {

throw err;

});

}

The first problem is that I have a Typescript error :

'Argument of type '{

headers: HttpHeaders;

observe: string;

responseType: string;

}' is not assignable to parameter of type'{

headers?: HttpHeaders;

observe?: "body";

params?: HttpParams; reportProgress?: boolean;

respons...'.

Types of property 'observe' are incompatible.

Type 'string' is not assignable to type '"body"'.'

at: '51,49' source: 'ts'

Indeed, when I go to the ref of post() method, I point on this prototype (I Use VS code)

post(url: string, body: any | null, options: {

headers?: HttpHeaders;

observe?: 'body';

params?: HttpParams;

reportProgress?: boolean;

responseType: 'arraybuffer';

withCredentials?: boolean;

}): Observable;

But I want this overloaded method :

post(url: string, body: any | null, options: {

headers?: HttpHeaders;

observe: 'response';

params?: HttpParams;

reportProgress?: boolean;

responseType?: 'json';

withCredentials?: boolean;

}): Observable>;

So, I tried to fix this error with this structure :

const options = {

headers: headers,

"observe?": "response",

"responseType?": "json",

};

And It compiles! But I just get the body request as in json format.

Futhermore, why I have to put a ? symbol at the end of some name of fields ? As I saw on Typescript site, this symbol should just tell to the user that it is optional ?

I also tried to use all the fields, without and with ? marks

EDIT

I tried the solutions proposed by Angular 4 get headers from API response. For the map solution:

this.http.post(url).map(resp => console.log(resp));

Typescript compiler tells that map does not exists because it is not a part of Observable

I also tried this

import { Response } from "@angular/http";

this.http.post(url).post((resp: Response) => resp)

It compiles, but I get a unsupported Media Type response.

These solutions should work for "Http" but it does not on "HttpClient".

EDIT 2

I get also a unsupported media type with the @Supamiu solution, so it would be an error on my headers. So the second solution from above (with Response type) should works too. But personnaly, I don't think it is a good way to mix "Http" with "HttpClient" so I will keep the solution of Supamiu

解决方案

You can observe the full response instead of the content only:

http

.get('/data.json', {observe: 'response'})

.subscribe(resp => {

// Here, resp is of type HttpResponse.

// You can inspect its headers:

console.log(resp.headers.get('X-Custom-Header'));

// And access the body directly, which is typed as MyJsonData as requested.

console.log(resp.body.someField);

});