Angular 4.3.3 HttpClient : How get value from the header of a response?

SolidCanary

( Editor: VS Code; Typescript: 2.2.1 )

The purpose is to get the headers of the response of the request

Assume a POST request with HttpClient in a 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;
        });
}

HttpClient Angular Documentation

The first problem is that I have a Typescript error :

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

Indeed, when I go to the ref of post() method, I point on this prototype (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>;

But I want this overloaded method :

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

So, I tried to fix this error with this structure :

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

And It compiles! But I just get the body request as in json format.

Futhermore, why I have to put a ? symbol at the end of some name of fields ? As I saw on Typescript site, this symbol should just tell to the user that it is optional ?

I also tried to use all the fields, without and with ? marks

EDIT

I tried the solutions proposed by Angular 4 get headers from API response. For the map solution:

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

Typescript compiler tells that map does not exists because it is not a part of Observable

I also tried this

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

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

It compiles, but I get a unsupported Media Type response. These solutions should work for "Http" but it does not on "HttpClient".

EDIT 2

I get also a unsupported media type with the @Supamiu solution, so it would be an error on my headers. So the second solution from above (with Response type) should works too. But personnaly, I don't think it is a good way to mix "Http" with "HttpClient" so I will keep the solution of Supamiu

Supamiu

You can observe the full response instead of the content only. To do so, you have to pass observe: response into the options parameter of the function call.

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

See HttpClient's documentation

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Joomla 3 - How to get value from configuration file?

From Dev

How to get the Smallest value from the Top 3 rows of the table in mysql

From Dev

How to get value from the element using selection in d3

From Dev

How to Get a custom header value from an HttpAuthenticationContext

From Dev

How to get an specific header value from the HttpResponseMessage

From Dev

HttpClient Get images from response

From Dev

How to get value from the JSON response

From Dev

How to get Response Header information from Spring RestTemplate GET request

From Dev

How to get value from header authorization bearer?

From Dev

How can I get the response header error from JavaScript?

From Dev

How to get the count value from a go-sqlite3 query?

From Dev

Cannot get 'location' header in response using HttpClient

From Dev

How to get the key and value pair from a list of dictionary in python 3

From Dev

How to get value in Response header Angular2

From Dev

how get response http header?

From Dev

How to get all value from List inside List in Vue 3

From Dev

How To get the value from a Json response

From Dev

How to edit S3 response header Allow

From Dev

Get a header from HTTP response

From Dev

HttpClient Get images from response

From Dev

how to get value from json response object

From Dev

how get response http header?

From Dev

angular2 How to store response header data from http.get in extra variable?

From Dev

How to get Header Response in angular 2 without external link?

From Dev

how to pass a response to parent component from service provider component of angular4 (ionic3), i got undefined value?

From Dev

How to format data from api response Angular HttpClient

From Dev

How get curlpp response header

From Dev

How to receive response from API in Angular 4

From Dev

No response from site of get request in python 3

Related Related

  1. 1

    Joomla 3 - How to get value from configuration file?

  2. 2

    How to get the Smallest value from the Top 3 rows of the table in mysql

  3. 3

    How to get value from the element using selection in d3

  4. 4

    How to Get a custom header value from an HttpAuthenticationContext

  5. 5

    How to get an specific header value from the HttpResponseMessage

  6. 6

    HttpClient Get images from response

  7. 7

    How to get value from the JSON response

  8. 8

    How to get Response Header information from Spring RestTemplate GET request

  9. 9

    How to get value from header authorization bearer?

  10. 10

    How can I get the response header error from JavaScript?

  11. 11

    How to get the count value from a go-sqlite3 query?

  12. 12

    Cannot get 'location' header in response using HttpClient

  13. 13

    How to get the key and value pair from a list of dictionary in python 3

  14. 14

    How to get value in Response header Angular2

  15. 15

    how get response http header?

  16. 16

    How to get all value from List inside List in Vue 3

  17. 17

    How To get the value from a Json response

  18. 18

    How to edit S3 response header Allow

  19. 19

    Get a header from HTTP response

  20. 20

    HttpClient Get images from response

  21. 21

    how to get value from json response object

  22. 22

    how get response http header?

  23. 23

    angular2 How to store response header data from http.get in extra variable?

  24. 24

    How to get Header Response in angular 2 without external link?

  25. 25

    how to pass a response to parent component from service provider component of angular4 (ionic3), i got undefined value?

  26. 26

    How to format data from api response Angular HttpClient

  27. 27

    How get curlpp response header

  28. 28

    How to receive response from API in Angular 4

  29. 29

    No response from site of get request in python 3

HotTag

Archive