javascript - example - Angular 4.3.3 HttpClient: ¿Cómo obtener valor del encabezado de una respuesta?
http post angular 5 (3)
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...
(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
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;
});
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);
});