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.

但是我无法在Blob中使用angular的HttpClient.post<T>(...): Observable<HttpResponse<T>>;方法.

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<Blob>('backendUrl', {responseType: 'blob'});，例如 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<Blob>(...))，因为返回的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屋！