时间戳

首页 > 解决方案 > 捕获错误并返回 of(undefined) 会停止流（Angular 7，rxjs6）

angular - 捕获错误并返回 of(undefined) 会停止流（Angular 7，rxjs6）

问题描述

在显示它们之前，我需要将图像预加载到浏览器缓存中。首先，我发出一个 http get 请求以获取带有对象数组的 json，其中包含图像详细信息以及图像源 URL。然后我将数组传递给我的图像服务的 preloadImages 方法，在该方法中我从每个图像中创建一个 observable，通过 mergeMap 将 observable 传递给 preloadImage 方法，在其中创建新的 Image() 并加载它。之后，我尝试捕获错误并返回一个未定义的可观察对象以保持流处于活动状态，但我失败了。我尝试使用 switchMap 创建一个新流并使用 mergeMap 和 catchError 对其进行管道传输，但它仍然失败我该怎么办？

image.service.ts
  preloadImages(images: any[]) {
return from(images).pipe(
  switchMap(x => {
    const newStream = of(x);
    return newStream.pipe(
      mergeMap(this.preloadImage),
      catchError(e => of(undefined))
    );
  }),

  toArray(),
  );
}

  preloadImage(img): Observable<HTMLImageElement> {
return Observable.create((observer: Observer<HTMLImageElement>) => {
  const image = new Image();
  image.src = img.url;
  image.onload = () => {
    console.log('id: ' + img.id + ' image was loaded');
    observer.next(img);
    observer.complete();
   };
  image.onerror = function (error) {
    observer.error(error);
  };
 });
}

如果图像 url 返回 404，我该如何继续流？在我的订阅中，接收一组加载的图像并删除未加载的图像将是理想的。先感谢您

标签： angularerror-handlingrxjspreloadrxjs6

解决方案

这是非常正常的 rxjs 行为，可以在出错时完成流。你应该做的是处理错误

  .subscribe(
    () => this.onSuccess(),
    error => this.handleError(error),
    () => {
      console.log("finalized.");
    }
  )

在这个错误处理函数（this.handleError(error)）中，您实际上必须处理错误，然后重新启动流。

希望这可以帮助。

推荐阅读