javascript - example - Angular 4.3.3 HttpClient: ¿Cómo obtener valor del encabezado de una respuesta?

http post angular 5

Question

(Editor: VS Code; Typescript: 2.2.1)

El propósito es obtener los encabezados de la respuesta de la solicitud.

Supongamos una solicitud POST con HttpClient en un servicio

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;
        });
}

Documentación Angular HttpClient

El primer problema es que tengo un error Typescript:

''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''

De hecho, cuando voy al método ref (post ()), señalo este prototipo (yo uso el código VS)

post(url: string, body: any | null, options: {
        headers?: HttpHeaders;
        observe?: ''body'';
        params?: HttpParams;
        reportProgress?: boolean;
        responseType: ''arraybuffer'';
        withCredentials?: boolean;
    }): Observable<ArrayBuffer>;

Pero quiero este método sobrecargado:

post(url: string, body: any | null, options: {
    headers?: HttpHeaders;
    observe: ''response'';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: ''json'';
    withCredentials?: boolean;
}): Observable<HttpResponse<Object>>;

Entonces, traté de arreglar este error con esta estructura:

  const options = {
            headers: headers,
            "observe?": "response",
            "responseType?": "json",
        };

Y se compila! Pero acabo de recibir la petición del cuerpo como en formato json.

Futhermore, ¿por qué tengo que poner un? ¿Símbolo al final de algún nombre de campos? Como vi en el sitio de Typescript, este símbolo debería decirle al usuario que es opcional.

También intenté usar todos los campos, sin y con? marcas

EDITAR

Probé las soluciones propuestas por Angular 4 para obtener encabezados de respuesta API . Para la solución de mapas:

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

El compilador de Typescript dice que el mapa no existe porque no es parte de Observable

También probé esto

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

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

Se compila, pero recibo una respuesta de tipo de medios no compatible. Estas soluciones deberían funcionar para "Http" pero no en "HttpClient".

Editar 2

También obtengo un tipo de medio no compatible con la solución @Supamiu, por lo que sería un error en mis encabezados. Así que la segunda solución desde arriba (con el tipo de Respuesta) también debería funcionar. Pero personalmente, no creo que sea una buena manera de mezclar "Http" con "HttpClient", así que mantendré la solución de Supamiu

Answer 1

De hecho, el problema principal era un problema de Typescript.

En el código de post (), las opciones se declararon directamente en los parámetros, por lo tanto, como una interfaz "anónima".

La solución fue poner directamente las opciones en crudo dentro de los parámetros.

http.post("url", body, {headers: headers, observe: "response"}).subscribe...

Answer 2

El principal problema del encasillado es para que podamos usar "respuesta" como "cuerpo"

podemos manejar como

const options = {
    headers: headers,
    observe: "response" as ''body'', // to display the full response & as ''body'' for type cast
    responseType: "json"
};

return this.http.post(sessionUrl, body, options)
    .subscribe(response => {
        console.log(response);
        return response;
    }, err => {
        throw err;
    });

Answer 3

Puede observar la respuesta completa en lugar del contenido solamente:

http
  .get<MyJsonData>(''/data.json'', {observe: ''response''})
  .subscribe(resp => {
    // Here, resp is of type HttpResponse<MyJsonData>.
    // 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);
  });

Ver la documentación de HttpClient.