Angular 4.3.3 HttpClient：如何从响应的头部获取值？ [英] Angular 4.3.3 HttpClient : How get value from the header of a response?
问题描述
（编辑：VS代码;打字稿：2.2.1）
( Editor: VS Code; Typescript: 2.2.1 )
目的是获取请求响应的标题
The purpose is to get the headers of the response of the request
假设在服务中使用HttpClient发出POST请求
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
第一个问题是我有一个Typescript错误：
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（）方法的参考时，我指向这个原型（我使用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
编辑
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编译器告诉地图不存在，因为它不是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
推荐答案
您可以观察完整的回复，而不仅仅是内容：
You can observe the full response instead of the content only:
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);
});
这篇关于Angular 4.3.3 HttpClient：如何从响应的头部获取值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
