Angular 5 управляет http get с помощью ответа blob и ошибок json
Я работаю над приложением 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.info('TODO', error);
// error.error is a Blob but i need to manage it as RemoteError[]
});
}
Когда серверное приложение находится в определенном состоянии, вместо возврата Blob-объекта оно возвращает HttpErrorResponse, который содержит в своем поле error массив RemoteError. RemoteError - это интерфейс, который я написал для управления удаленными ошибками.
В функции catch error.error - это Blob. Как я могу перевести атрибут Blob в массив RemoteError[]?
Заранее спасибо.
Ответы 4
Как в документации: «Единственный способ прочитать содержимое из Blob-объекта - использовать FileReader». https://developer.mozilla.org/en-US/docs/Web/API/Blob.
Обновлено: Если вам нужна часть blob, вы можете сделать срез, который возвращает новый Blob, а затем воспользуйтесь программой чтения файлов.
Это известный Угловая проблема, и в этом потоке 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 { }
Ожидается, что ответ будет Blob, но, по-видимому, это не так. Чтобы избежать этой ошибки, измените responseType с blob на arraybuffer.
public executeDownload(id: string): Observable<Blob> {
return this.http.get(this.replaceUrl('app/download', denunciaId), {responseType: 'arraybuffer'}).map(result => {
return result;
});
}
Как, наверное, большинство людей, мне нужно было синхронизировать сообщение об ошибке. Я решил проблему, поместив ее в окно предупреждения:
(err:any) => {
// Because result, including err.error, is a blob,
// we must use FileReader to display it asynchronously:
var reader = new FileReader();
reader.onloadend = function(e) {
alert("Error:\n" + (<any>e.target).result);
}
reader.readAsText(err.error);
let errorMessage = "Error: " + err.status.toString() + " Error will display in alert box.";
// your code here to display error messages.
},
Должен быть принятый ответ, отлично, скопируйте / вставьте.