Angular (5) httpclient 观察和响应类型:'blob' [英] Angular (5) httpclient observe and responseType: 'blob'
问题描述
上下文:我正在尝试从后端下载一个二进制文件(这需要一些作为 json-body 发布的数据),并使用后端在 content-disposition 标头中指定的文件名将其保存在文件保护程序中.要访问标头,我认为我需要 HttpResponse.
Context: I'm trying to download a binary file from a backend (that requires some data posted as json-body) and save it with file-saver using the filename specified by the backend in the content-disposition header. To access the headers I think I need the HttpResponse.
但我无法将 angular 的 HttpClient.post
方法与 Blob 一起使用.
But I'm unable to use angular's HttpClient.post<T>(...): Observable<HttpResponse<T>>;
method with a Blob.
当我打电话
this.httpclient.post<Blob>('MyBackendUrl',
params,
{observe: 'response', responseType: 'blob'});
the compiler complains about the 'blob' ('json' is accepted by the compiler):
error TS2345: Argument of type '{ observe: "response"; responseType: "blob"; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.
Types of property 'observe' are incompatible.
Type '"response"' is not assignable to type '"body"'.
当我将选项放入自己的对象中时,如 https://stackoverflow.com/a/48016652/2131459(但没有as"...) post(...):Observable 被调用,我无法访问标题.
When I put the options in an own object as seen in https://stackoverflow.com/a/48016652/2131459 (but without the "as" ...) the post(...):Observable is called and I cannot access the headers.
顺便说一句,即使是简单的例子 return this.http.get
如所见,例如在 https://stackoverflow.com/a/46882407/2131459 中对我不起作用.
Btw, even the simple example return this.http.get<Blob>('backendUrl', {responseType: 'blob'});
as seen e.g. in https://stackoverflow.com/a/46882407/2131459 doesn't work for me.
使用的版本
- Angular 版本:5.0.3(将在一周左右更新到最新的 5 个)
- 打字稿:2.4.2
- webpack:3.8.1
推荐答案
使用 observe:response
时,不要输入调用 (post
),因为返回的 Observable 将是 HttpResponse.所以这应该有效:
When using observe:response
, don't type the call (post<Blob>(...)
), as the returned Observable will be of HttpResponse. So this should work:
this.httpclient.post('MyBackendUrl',
params,
{observe: 'response', responseType: 'blob'}
);
为什么会发生这种情况,是否有两种版本的 post 方法,一种具有泛型类型,一种没有:
Why this happens, is there's two versions of the post method, one with a generic type, one without:
/**
* Construct a POST request which interprets the body as JSON and returns the full event stream.
*
* @return an `Observable` of all `HttpEvent`s for the request, with a body type of `T`.
*/
post<T>(url: string, body: any | null, options: {
headers?: HttpHeaders | {
[header: string]: string | string[];
};
observe: 'events';
params?: HttpParams | {
[param: string]: string | string[];
};
reportProgress?: boolean;
responseType?: 'json';
withCredentials?: boolean;
}): Observable<HttpEvent<T>>;
/**
* Construct a POST request which interprets the body as an `ArrayBuffer` and returns the full response.
*
* @return an `Observable` of the `HttpResponse` for the request, with a body type of `ArrayBuffer`.
*/
post(url: string, body: any | null, options: {
headers?: HttpHeaders | {
[header: string]: string | string[];
};
observe: 'response';
params?: HttpParams | {
[param: string]: string | string[];
};
reportProgress?: boolean;
responseType: 'arraybuffer';
withCredentials?: boolean;
}): Observable<HttpResponse<ArrayBuffer>>;
这篇关于Angular (5) httpclient 观察和响应类型:'blob'的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!