Angular 4.3.3 HttpClient:如何从响应头中获取值?

问题描述

(编辑器:VS Code；打字稿:2.2.1)

( Editor: VS Code; Typescript: 2.2.1 )

目的是获取请求的响应头

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

假设一个 POST 请求与服务中的 HttpClient

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 文档

第一个问题是我有一个打字稿错误:

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'

确实，当我去 post() 方法的 ref 时，我指向了这个原型(我使用 VS 代码)

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",
        };

它编译了！但我只是得到了 json 格式的正文请求.

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

此外，为什么我必须放一个?某些字段名称末尾的符号?正如我在 Typescript 网站上看到的，这个符号应该只是告诉用户它是可选的?

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

编辑

我尝试了 Angular 4 从 API 响应中获取标头.对于地图解决方案:

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 编译器告诉 map 不存在，因为它不是 Observable 的一部分

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

我也试过这个

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

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

它可以编译，但我收到了不受支持的媒体类型响应.这些解决方案应该适用于Http"，但不适用于HttpClient".

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

编辑 2

我的@Supamiu 解决方案也得到了不受支持的媒体类型，因此我的标题会出错.所以上面的第二个解决方案(带有响应类型)也应该有效.但是我个人认为将Http"和HttpClient"混在一起不是一个好方法，所以我会保留Supamiu的解决方案

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

推荐答案

您可以观察完整的响应，而不仅仅是内容.为此，您必须将 observe: response 传递到函数调用的 options 参数中.

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

请参阅HttpClient 的文档

这篇关于Angular 4.3.3 HttpClient:如何从响应头中获取值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！