webentwicklung-frage-antwort-db.com.de

Angular 4.3.3 HttpClient: Wie wird der Wert aus dem Header einer Antwort abgerufen?

(Editor: VS Code; TypeScript: 2.2.1)

Der Zweck besteht darin, die Header der Antwort auf die Anfrage abzurufen

Nehmen Sie eine POST - Anforderung mit HttpClient in einem Service an 

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

HttpClient Winkeldokumentation

Das erste Problem ist, dass ich einen TypeScript-Fehler habe:

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

Wenn ich zur ref von post () -Methode gehe, verweise ich auf diesen Prototyp (I Use VS code).

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

Aber ich möchte diese überladene Methode:

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

Also habe ich versucht, diesen Fehler mit dieser Struktur zu beheben:

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

Und es kompiliert! Ich bekomme aber nur die Body-Anfrage wie im Json-Format.

Warum muss ich noch einen setzen? Symbol am Ende eines Feldnamens? Wie ich auf der TypeScript-Site gesehen habe, sollte dieses Symbol dem Benutzer nur sagen, dass es optional ist.

Ich habe auch versucht, alle Felder zu verwenden, ohne und mit? Marken

EDIT 

Ich habe die von Angular 4 vorgeschlagenen Lösungen ausprobiert . Für die Kartenlösung:

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

Der TypeScript-Compiler teilt mit, dass die Map nicht existiert, weil sie nicht Teil von Observable ist

Ich habe das auch probiert

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

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

Es wird kompiliert, aber ich bekomme eine nicht unterstützte Media Type-Antwort .. Diese Lösungen sollten für "Http" funktionieren, aber nicht für "HttpClient".

EDIT 2

Ich bekomme auch einen nicht unterstützten Medientyp mit der @Supamiu-Lösung, daher wäre dies ein Fehler in meinen Kopfzeilen. Die zweite Lösung von oben (mit Antworttyp) sollte also ebenfalls funktionieren. Aber persönlich denke ich nicht, dass es eine gute Möglichkeit ist, "Http" mit "HttpClient" zu mischen, also werde ich die Lösung von Supamiu beibehalten

37
M.Lobry

Sie können statt des Inhalts nur die vollständige Antwort beobachten:

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

Siehe HttpClient's Dokumentation

74
Supamiu

In der Tat war das Hauptproblem ein TypeScript-Problem.

Im Code von post () wurden Optionen direkt in den Parametern deklariert, also als "anonyme" Schnittstelle.

Die Lösung bestand darin, die Optionen direkt in die Parameter einzugeben

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

hauptproblem der Typumwandlung, so dass wir "Antwort" als "Körper" verwenden können

wir können damit umgehen

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;
    });
13
Birbal Singh

Wenn Sie die Lösung aus der ersten Antwort verwenden und keinen Zugriff auf .keys() oder .get() in response.headers haben, stellen Sie sicher, dass Sie fetch anstelle von xhr verwenden. 

Abrufanfragen sind die Standardeinstellung, aber Angular verwendet xhr, wenn nur Xhr-Header vorhanden sind (e.x. x-www-form-urlencoded).

Wenn Sie versuchen, auf benutzerdefinierte Antwortheader zuzugreifen, müssen Sie diese mit einem anderen Header namens Access-Control-Expose-Headers angeben.

0
Man Personson