web-dev-qa-db-ja.com

Angular（5）httpclient observeおよびresponseType： 'blob'

コンテキスト：バイナリファイルをバックエンド（json-bodyとして投稿されるデータが必要）からダウンロードし、content-dispositionヘッダーのバックエンドで指定されたファイル名を使用してファイルセーバーで保存しようとしています。ヘッダーにアクセスするには、HttpResponseが必要だと思います。

しかし、AngularのHttpClient.post<T>(...): Observable<HttpResponse<T>>;メソッドを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が呼び出され、ヘッダーにアクセスできません。

ところで、見られるような簡単な例return this.http.get<Blob>('backendUrl', {responseType: 'blob'});さえ。 in https://stackoverflow.com/a/46882407/2131459 は機能しません。

使用されているバージョン

  • 角度バージョン：5.0.3（1週間以内に最新の5に更新されます）
  • TypeScript：2.4.2
  • webpack：3.8.1
angularangular-httpclient
12
Chris

observe:responseを使用する場合は、呼び出し（post<Blob>(...)）を入力しないでください。返されるObservableはHttpResponseになります。したがって、これは動作するはずです：

this.httpclient.post('MyBackendUrl', 
    params,
    {observe: 'response', responseType: 'blob'}
);

これが起こる理由は、postメソッドには2つのバージョンがあり、1つはジェネリック型で、もう1つはなしです。

/**
     * 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>>;
38
funkizer

あなたは好きなように使用できます

responseType: 'blob' as 'json'
1
dheeraj kumar