Question

我使用httpClient调用http请求，并使用响应类型作为＆＃39; blob＆＃39;但问题是当它出错时阻止响应类型仍然是“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);

}

)

问题是我将请求类型设置为＆＃39; blob＆＃39;和错误的类型是任何。因此，当错误发生并进入错误块时，响应类型仍然是“blob”。如何处理？

Answer 1

我遇到了同样的问题。为了处理blob请求的错误响应，您必须通过FileReader

解析错误内容

这是一个已知的Angular Issue，可以在那里阅读更多细节。您也可以在那里找到解决问题的不同解决方案。

例如，您可以使用此函数来解析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 issue，但是没有提到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

Answer 5

SplitterAlex的代码对我有用，但我也需要错误对象和状态代码。这就是为什么我稍微调整了 parseErrorBlob 方法的原因。

public parseErrorBlob(err: HttpErrorResponse): Observable<any> {
const reader: FileReader = new FileReader();
const obs = new Observable((observer: any) => {
  reader.onloadend = (e) => {
    const messageObject = JSON.parse(reader.result as string);
    observer.error({
      error : {
        message : messageObject.message
      },
      message : messageObject.message,
      status : err.status
    });
    observer.complete();
  };
});
reader.readAsText(err.error);
return obs;

}

Answer 6

如果您使用的是RxJS，则可以使用以下代码：

catchError((response: HttpErrorResponse) => {
  return !!this.isBlobError(response) ? this.parseErrorBlob(response) : throwError(response);
})

之后，您可以链接其他catchError并完成您的工作。

以下是方法：

isBlobError(err: any) {
  return err instanceof HttpErrorResponse && err.error instanceof Blob && err.error.type === 'application/json';
}

parseErrorBlob(err: HttpErrorResponse): Observable<any> {
  const reader: FileReader = new FileReader();
  const obs = new Observable((observer: any) => {
    reader.onloadend = (e) => {
      observer.error(new HttpErrorResponse({
        ...err,
        error: JSON.parse(reader.result as string),
      }));
      observer.complete();
    };
  });
  reader.readAsText(err.error);
  return obs;
}

Answer 7

基于 accepted answer 我使用一个统一的函数来下载服务中的东西（通常作为一个字节数组），它可以注入任何组件并使该函数准备好全局使用，以避免样板.

word_to_guess

同时，当我在拦截器中全局处理错误时，必须在那里放置一个排除：

getAndSave(url: string, filename: string, mime: string, params?: HttpParams) {
            this.http.get(url, {responseType: "blob", params: params}).subscribe((content: any) => {
              const blob = new Blob([content], { type: mime });
              saveAs(blob, filename);
            }, async (error) => {
              const message = JSON.parse(await error.error.text()).message;
              this.toast.error(message, 'Error');
            });
          }

基本用法：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
                const clonedRequest = req.clone({
                  withCredentials: true, // depending on needs
                });
            
                return next.handle(clonedRequest).pipe(
                  catchError((err: any) => {
                    if(err instanceof HttpErrorResponse) {
                      if (!(err.error instanceof Blob)) { // it's here
                        this.toast.error(err.error, 'Error');  
                      }
                    }
                    return of(err);
                  }));
    }

如何在HttpRequest

7 个答案: