如何在HttpRequest中处理响应类型blob的错误

Question

我使用httpClient调用http请求并使用响应类型作为'blob',但问题是当它进入错误块时,响应类型仍然是'blob'.这导致我的错误处理问题.

this.httpClient.get('http://m502126:3000/reports/perdate', {
observe: 'body',
responseType: 'blob',
params: new HttpParams().set('START_DATE', startDate)
 .set('END_DATE', endDate)
 .set('MIXER', mixer)
 .set('ATTACH', 'true')

 }).subscribe(data => {
 console.log(data);
},
error => {
 console.log(error);

}

)

问题是我将请求类型设置为'blob',错误类型是任何.因此,当错误发生并进入错误块时,响应类型仍为"blob".怎么办呢？

Answer 1

我面临同样的问题.为了处理blob请求的错误响应,您必须通过解析错误内容FileReader

这是一个已知的角度问题,可以在那里阅读更多细节.您也可以在那里找到解决问题的不同解决方案.

例如,您可以使用此函数来解析JSON中的错误:

  parseErrorBlob(err: HttpErrorResponse): Observable<any> {
    const reader: FileReader = new FileReader();

    const obs = Observable.create((observer: any) => {
      reader.onloadend = (e) => {
        observer.error(JSON.parse(reader.result));
        observer.complete();
      }
    });
    reader.readAsText(err.error);
    return obs;
}

并像这样使用它:

public fetchBlob(): Observable<Blob> {
  return this.http.get(
    'my/url/to/ressource',
    {responseType: 'blob'}
  ).pipe(catchError(this.parseErrorBlob))
}  

Answer 2

SplitterAlex 的回答提到了Angular 问题，但没有提到 JaapMosselman 提供的一个非常好的解决方案，该解决方案涉及创建一个HttpInterceptor将 Blob 转换回 JSON 的解决方案。

这样，您不必在整个应用程序中实现这一点，当问题解决后，您只需将其删除即可。

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class BlobErrorHttpInterceptor implements HttpInterceptor {
    public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            catchError(err => {
                if (err instanceof HttpErrorResponse && err.error instanceof Blob && err.error.type === "application/json") {
                    // https://github.com/angular/angular/issues/19888
                    // When request of type Blob, the error is also in Blob instead of object of the json data
                    return new Promise<any>((resolve, reject) => {
                        let reader = new FileReader();
                        reader.onload = (e: Event) => {
                            try {
                                const errmsg = JSON.parse((<any>e.target).result);
                                reject(new HttpErrorResponse({
                                    error: errmsg,
                                    headers: err.headers,
                                    status: err.status,
                                    statusText: err.statusText,
                                    url: err.url
                                }));
                            } catch (e) {
                                reject(err);
                            }
                        };
                        reader.onerror = (e) => {
                            reject(err);
                        };
                        reader.readAsText(err.error);
                    });
                }
                return throwError(err);
            })
        );
    }
}

在你的 AppModule 或 CoreModule 中声明它：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
...

@NgModule({
    ...
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: BlobErrorHttpInterceptor,
            multi: true
        },
    ],
    ...
export class CoreModule { }

Answer 3

也可以使用：error.text()

this.dataService
  .getFile()
  .subscribe((response) => {
    FileSaver.saveAs(response.body, 'file.txt');
  }, async (error) => {
    const message = JSON.parse(await error.error.text()).message;

    this.toast.error(message, 'Error');
  });

Answer 4

今天努力从 blob 响应中提取 json 错误。

async error => {
    const jsonError = await (new Response(error.error)).json();
    await this.messageService.showErrorToast(jsonError.message);
}

这是我想出的最简单的解决方案。来源https://developer.mozilla.org/en-US/docs/Web/API/Blob#extracting_data_from_a_blob