Angular 4.3.3 HttpClient : Comment obtenir la valeur de l'en-tête d'une réponse ?

Question

( Editeur: VS Code; Typescript: 2.2.1 )

Le but est d'obtenir les en-têtes de la réponse de la requête

Supposons une requête POST avec HttpClient dans un 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;
        });
}

Documentation HttpClient Angular

Le premier problème est que j'ai une erreur de Typescript :

'Argument de type '{ 
    headers: HttpHeaders; 
    observe: string; 
    responseType: string;
}' n'est pas assignable au paramètre de type '{ 
    headers?: HttpHeaders;
    observe?: "body";
    params?: HttpParams; reportProgress?: boolean;
    respons...'.

Types de propriété 'observe' sont incompatibles.
Le type 'string' n'est pas assignable au type '"body"'.'
à: '51,49' source: 'ts'

En effet, lorsque je vais à la référence de la méthode post(), je pointe sur ce prototype (j'utilise VS code)

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

Mais je veux cette méthode surchargée :

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

Donc, j'ai essayé de corriger cette erreur avec cette structure :

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

Et ça compile ! Mais je reçois simplement le corps de la requête au format json.

En outre, pourquoi dois-je mettre un symbole ? à la fin de certains noms de champs ? Comme je l'ai vu sur le site Typescript, ce symbole devrait simplement indiquer à l'utilisateur qu'il est facultatif ?

J'ai également essayé d'utiliser tous les champs, sans et avec des ?

EDIT

J'ai essayé les solutions proposées par Angular 4 obtenir les en-têtes de la réponse API. Pour la solution map :

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

Le compilateur Typescript indique que map n'existe pas car ce n'est pas une partie de Observable

J'ai aussi essayé ceci

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

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

Ça compile, mais je reçois une réponse de type support non pris en charge. Ces solutions devraient fonctionner pour "Http" mais pas sur "HttpClient".

EDIT 2

J'obtiens également une réponse de type de support non pris en charge avec la solution @Supamiu, donc il y aurait une erreur sur mes en-têtes. Donc la deuxième solution ci-dessus (avec le type Response) devrait aussi fonctionner. Mais personnellement, je ne pense pas que ce soit une bonne façon de mélanger "Http" avec "HttpClient" donc je vais garder la solution de Supamiu

Answer 1

Vous pouvez observer la réponse complète au lieu du contenu uniquement. Pour ce faire, vous devez transmettre observe: response dans le paramètre options de l'appel de la fonction.

http
  .get('/data.json', {observe: 'response'})
  .subscribe(resp => {
    // Ici, resp est de type HttpResponse.
    // Vous pouvez inspecter ses en-têtes :
    console.log(resp.headers.get('X-Custom-Header'));
    // Et accéder directement au corps, qui est typé comme MyJsonData comme demandé.
    console.log(resp.body.someField);
  });

Voir la documentation de HttpClient

Answer 2

Principal problème de typecast donc nous pouvons utiliser "response" comme 'body'

nous pouvons gérer comme

const options = {
    headers: headers,
    observe: "response" as 'body', // pour afficher la réponse complète & comme 'body' pour le type cast
    responseType: "json"
};

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

Answer 3

En effet, le principal problème était un problème de Typescript.

Dans le code de post(), les options étaient déclarées directement dans les paramètres, donc, en tant qu'interface "anonyme".

La solution a été de mettre directement les options en brut à l'intérieur des paramètres

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

Answer 4

La méthode ci-dessous a parfaitement fonctionné pour moi (actuellement Angular 10). Elle évite également de définir un nom de fichier arbitraire, à la place elle récupère le nom de fichier à partir de l'en-tête content-disposition.

this._httpClient.get("api/FileDownload/GetFile", { responseType: 'blob' as 'json', observe: 'response' }).subscribe(response =>  { 
    /* Obtenir le nom de fichier à partir de l'en-tête Content-Disposition */
    var filename = "";
    var disposition = response.headers.get('Content-Disposition');
    if (disposition && disposition.indexOf('attachment') !== -1) {
        var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
        var matches = filenameRegex.exec(disposition);
        if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
    }
    // Cela fait l'affaire
    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(response.body);
    a.download = filename;
    a.dispatchEvent(new MouseEvent('click'));
})

Answer 5

Si vous utilisez la solution de la réponse principale et que vous n'avez pas accès à .keys() ou .get() sur response.headers, assurez-vous d'utiliser fetch plutôt que xhr.

Les requêtes Fetch sont les paramètres par défaut, mais Angular utilisera xhr si des en-têtes xhr-only sont présents (par exemple x-www-form-urlencoded).

Si vous essayez d'accéder à des en-têtes de réponse personnalisés, vous devez spécifier ces en-têtes avec un autre en-tête appelé Access-Control-Expose-Headers.