使用异步管道和 Observable<Blob> 处理错误答案

【问题标题】：Handling Errors with async pipe and Observable<Blob>使用异步管道和 Observable<Blob> 处理错误
【发布时间】：2019-04-12 01:55:18
【问题描述】：

以下服务方法返回一张图片（如果数据库中存在给定参数的图片），如果图片不存在则返回 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>

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

如果我在 .catch() 方法中返回“未定义”，我会收到以下错误：

您在预期流的位置提供了“未定义”。您可以提供一个 Observable、Promise、Array 或 Iterable。

如果服务返回 404 错误，则期望的行为是，image$ observable 指向客户端应用程序资产中的某个默认图像。但我不知道该怎么做:(

【问题讨论】：

所以你得到 404 因为你的服务并没有真正返回图像。它改为返回 404 状态码。就问题而言，一个优雅的解决方案是在您的资产中存在或托管在某个地方的自定义 404 Not Found 图像，然后在 catch 块中，而不是返回 -1 或 null 或未定义，您返回一个可观察到该图像路径。

标签： angular

【解决方案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');
    }));

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

【讨论】：

如果服务返回 404 错误，期望的行为是，image$ observable 指向客户端应用程序资产中的某个默认图像。但是我不知道该怎么做:(另外，我目前确实在组件中捕获了异常，但它仍然没有被全局异常处理程序处理，所以我想我在上面的代码中没有正确捕获它？
而不是 this.router.navigate 只需添加指向 404 图像的行并使用 catchError 而不是 catch