Angular 4.3.3 HttpClient：如何从响应的标头中获取值？

Question

（ 编辑： 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文档

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

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

我也试过这个

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

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

它编译，但我得到一个不受支持的媒体类型响应。这些解决方案应该适用于“Http”，但它不适用于“客户端”。

编辑2

我还通过@Supamiu解决方案得到了一个不支持的媒体类型，所以它将是我的头上的一个错误。所以上面的第二个解决方案(带有响应类型)应该也可以。但是personnaly，我不认为把“Http”和“HttpClient”混在一起是个好办法，所以我会保留Supamiu的解决方案

Answer 1

事实上，主要问题是打字稿问题。

在post（）的代码中，选项直接在参数中声明，因此，作为“匿名”接口。

解决方案是直接将选项放在参数中

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

Answer 2

类型转换的主要问题，所以我们可以使用“响应”作为“身体”

我们可以处理像

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

Answer 3

您可以观察完整的响应，而不仅仅是内容。为此，您必须将＜code＞observe:response参数中。

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