javascript-Angular 4.3.3 HttpClient:如何从响应的标头获取值?

(编辑:VS代码;打字稿:2.2.1)

目的是获取请求响应的标头

假设服务中具有HttpClient的POST请求

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

第一个问题是我遇到Typescript错误:

'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代码)

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

但是我想要这个重载的方法:

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

因此,我尝试使用此结构修复此错误:

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

并编译! 但是我只是得到json格式的主体请求。

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

我也尝试使用所有字段,不带和带? 分数

编辑

我尝试了Angular 4提出的从API响应获取标头的解决方案。 对于地图解决方案:

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

Typescript编译器告诉您映射不存在,因为它不是Observable的一部分

我也尝试过

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

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

它可以编译,但是得到了不受支持的媒体类型响应。这些解决方案应适用于“ Http”,但不适用于“ HttpClient”。

编辑2

@Supamiu解决方案还提供了不受支持的媒体类型,因此标题中将出现错误。 因此,上面的第二个解决方案(具有Response类型)也应该起作用。 但从个性上来说,我认为这不是将“ Http”与“ HttpClient”混合使用的好方法,因此我将保留Supamiu的解决方案

4个解决方案
87 votes

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

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

Supamiu answered 2020-08-06T08:07:33Z
17 votes

类型转换的主要问题,因此我们可以将“响应”用作“正文”

我们可以像

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;
    });
Birbal Singh answered 2020-08-06T08:07:57Z
14 votes

确实,主要问题是打字稿问题。

在post()代码中,选项直接在参数中声明,因此称为“匿名”接口。

解决方案是将选项直接放在原始参数内

http.post("url", body, {headers: headers, observe: "response"}).subscribe...
M.Lobry answered 2020-08-06T08:08:27Z
1 votes

如果您使用最上面的答案中的解决方案,并且无法访问response.headers上的x-www-form-urlencoded.get(),请确保您使用的是访存而不是xhr。

提取请求是默认的,但是如果存在仅xhr的标头(例如x-www-form-urlencoded),Angular将使用xhr。

如果尝试访问任何自定义响应标头,则必须使用称为Access-Control-Expose-Headers的另一个标头指定这些标头。

Kevin Beal answered 2020-08-06T08:08:57Z
translate from https://stackoverflow.com:/questions/45505619/angular-4-3-3-httpclient-how-get-value-from-the-header-of-a-response