Angular 5 使用 blob 响应和 json 错误管理 http get

Question

我正在开发 Angular 5 应用程序。我必须从我的后端应用程序下载一个文件，为此我只需调用如下函数:

public executeDownload(id: string): Observable<Blob> {
  return this.http.get(this.replaceUrl('app/download', denunciaId), {responseType: 'blob'}).map(result => {
    return result;
  });
}

并调用我刚刚调用的下载服务:

public onDownload() {
  this.downloadService.executeDownload(this.id).subscribe(res => {
    saveAs(res, 'file.pdf');
  }, (error) => {
    console.log('TODO', error);
    // error.error is a Blob but i need to manage it as RemoteError[]
  });
}

当后端应用程序处于特定状态时，它不会返回 Blob，而是返回一个 HttpErrorResponse，在其 error 字段中包含一个 RemoteError 数组。 RemoteError 是我编写的用于管理远程错误的接口(interface)。

在catch函数中，error.error是一个Blob。如何将 Blob 属性转换为 RemoteError[] 数组？

提前致谢。

Answer 1

这是一个已知的 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 { }