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>

但是，当网络服务请求返回404时，我仍然遇到未捕获的404 http异常。

如果在.catch（）方法中返回“ 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');
    }));

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

使用异步管道和Observable <blob>处理错误

1 个答案: