Угловой (5) httpclient наблюдать и responseType: 'blob'

контекст: я пытаюсь загрузить двоичный файл из бэкэнда (который требует некоторых данных, опубликованных как JSON-body) и сохранить его с помощью File-saver, используя имя файла, указанное бэкэндом в заголовке content-disposition. Чтобы получить доступ к заголовкам, мне нужен HttpResponse.

но я не могу использовать angular HttpClient.post<T>(...): Observable<HttpResponse<T>>; метод с Blob.

когда я называю

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

компилятор жалуется на "blob" ("json" принимается компилятор):

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 (но без "как"...) пост.(..): Observable вызывается, и я не могу получить доступ к заголовкам.

кстати, даже простой пример return this.http.get<Blob>('backendUrl', {responseType: 'blob'}); как видно, например, в https://stackoverflow.com/a/46882407/2131459 не работает для меня.

версии

  • Угловое Версия: 5.0.3 (будет обновлен до последней версии 5 через неделю или около того)
  • typescript: 2.4.2
  • webpack: 3.8.1

1 ответов


при использовании observe:response, Не набирайте вызов (post<Blob>(...)), поскольку возвращаемый наблюдаемый будет HttpResponse. Так что это должно сработать:

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

Почему это происходит, есть две версии метода post, одна с общим типом, одна без:

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