Kątowa 4.3.3 HttpClient: Jak uzyskać wartość z nagłówka odpowiedzi?

Question

(Redaktor: VS Kod; Typescript: 2.2.1)

Celem jest uzyskanie nagłówki z odpowiedzią na wniosek

Załóżmy żądania POST z HttpClient w usłudze

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 Angular Documentation

pierwszym problemem jest to, że mam maszynopis błąd:

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

Rzeczywiście, kiedy idę do ref postu() metoda, wskazuję na tym prototypie (kod za pomocą VS)

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

Ale chcę to przeciążone metody:

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

Tak , Próbowałem naprawić ten błąd w tej strukturze:

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

I kompiluje! Ale dostaję prośbę o ciało, tak jak w formacie json.

Co więcej, dlaczego muszę umieścić? symbol na końcu niektórych pól? Jak widziałem w witrynie Typescript, ten symbol powinien po prostu powiedzieć użytkownikowi, że jest on opcjonalny?

Próbowałem również używać wszystkich pól bez i z? zaznacza

EDIT

Próbowałem proponowane przez Angular 4 get headers from API response rozwiązań. Dla roztworu mapy:

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

Typescript kompilator mówi, że mapa nie istnieje, ponieważ nie jest częścią obserwowalnych

Próbowałem też to

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

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

To kompiluje, ale dostaję nieobsługiwana odpowiedź Media Type. Rozwiązania te powinny działać dla "Http", ale nie na "HttpClient".

EDIT 2

uzyskać także nieobsługiwany typ nośnika z roztworem @Supamiu, więc byłby to błąd na moich nagłówków. Zatem drugie rozwiązanie z góry (z typem odpowiedzi) powinno również działać. Ale PERSONNALY, nie sądzę, że jest to dobry sposób, żeby mieszać „http” na „HttpClient”, więc będę rozwiązanie Supamiu

Answer 1

Można zaobserwować pełną odpowiedź, a nie tylko treść:

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

Zobacz HttpClient's documentation