使用异步管道和可<Blob>观察处理错误

Question

以下服务方法返回一个图像(如果数据库中给定参数存在图像(，如果图像不存在，则返回404错误：

public getLegendImage(id: string): Observable<Blob> {
let params = new HttpParams();
params = params.append('id', id);
return <Observable<Blob>>this.http.get('service/getLegendImage', { params: params, responseType: 'blob'});
}

在我的组件中，我使用异步管道：

ngOnInit() {
this.data = this.activeLayers.map(layer => ({ id: layer.id, name: layer.name, image$: this.getLayerImage$(layer.id)}));  
}
public getLayerImage$(layer: string): Observable<SafeUrl> {
return this.layerService.getLegendImage(layer).map(blob =>  this.domSanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(blob)))
.catch(err => Observable.of(-1));
}

在模板中：

<div *ngFor="let layer of this.data">
<b>{{ layer.name }}</b><br>
<span class="legend-image"><img [attr.src]="(layer.image$ | async)" /></span>              
</div>

然而，当webservice请求返回404时，我仍然会得到未捕获的404http异常。

如果我在.catch((方法中返回"undefined"，我会得到以下错误：

您在需要流的地方提供了"undefined"。您可以提供可观测的、承诺的、数组的或可迭代的。

所需的行为是，如果服务返回404错误，则image$可观察到的对象指向客户端应用程序资产中的某个默认图像。但我不知道该怎么做：(

Answer 1

我假设您想要重定向到404页面，在这种情况下，我建议在服务内的http调用中捕获错误。例如：

return <Observable<Blob>>this.http.get('service/getLegendImage', { params: params, responseType: 'blob'}).pipe(
catchError(() => {
this.router.navigate(['/404']);
return Observable.throw('Error 404');
}));

如果您不想重定向，只需删除导航代码并捕获组件中的错误。