(编辑器:VS Code;打字稿: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 Documentation
第一个问题是我有一个打字稿错误:
'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 get headers from API response 提出的解决方案。对于地图解决方案:
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”,但不适用于“HttpClient”。
编辑 2
我还使用@Supamiu 解决方案获得了不受支持的媒体类型,所以这将是我的标题上的错误。所以上面的第二个解决方案(带有响应类型)也应该有效。但就个人而言,我认为将“Http”与“HttpClient”混合不是一个好方法,所以我会保留 Supamiu 的解决方案
您可以观察完整的响应,而不仅仅是内容。为此,您必须将 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);
});
类型转换的主要问题,因此我们可以将“响应”用作“正文”
我们可以处理
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;
});
实际上,主要问题是 Typescript 问题。
在 post() 的代码中,选项直接在参数中声明,因此,作为“匿名”接口。
解决方案是直接将选项放在参数里面
http.post("url", body, {headers: headers, observe: "response"}).subscribe...
如果您使用最佳答案中的解决方案并且您无权访问 response.headers
上的 .keys()
或 .get()
,请确保您使用的是 fetch 而不是 xhr。
获取请求是默认的,但如果存在仅 xhr 的标头(例如 x-www-form-urlencoded
),Angular 将使用 xhr。
如果您尝试访问任何自定义响应标头,则必须使用另一个名为 Access-Control-Expose-Headers 的标头来指定这些标头。
有时即使使用上述解决方案,如果是 CORS 请求,您也无法检索自定义标头。在这种情况下,您需要在服务器端将所需的标头列入白名单。
例如:Access-Control-Expose-Headers:X-Total-Count
下面的方法对我来说非常有效(目前是 Angular 10)。它还避免设置一些任意文件名,而是从 content-disposition 标头获取文件名。
this._httpClient.get("api/FileDownload/GetFile", { responseType: 'blob' as 'json', observe: 'response' }).subscribe(response => {
/* Get filename from Content-Disposition header */
var filename = "";
var disposition = response.headers.get('Content-Disposition');
if (disposition && disposition.indexOf('attachment') !== -1) {
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
}
// This does the trick
var a = document.createElement('a');
a.href = window.URL.createObjectURL(response.body);
a.download = filename;
a.dispatchEvent(new MouseEvent('click'));
})
正如其他开发人员所说,为了将 headers 和 body 放在一起,您应该以这种方式定义观察者 yield 的类型:
http.post("url", body, {headers: headers, observe: "response" as "body"})
然后您可以访问 pip 或订阅区域中的正文和标题:
http.post("url", body, {headers: headers, observe: "response" as "body"})
.pip(
tap(res => {
// res.headers
// res.body
})
)
.subscribe(res => {
// res.headers
// res.body
})
Response Headers
中的值。