捕获错误并返回（undefined）会停止流（Angular 7，rxjs6）

Question

我需要在显示之前将图像预先加载到浏览器缓存中。首先，我创建一个http get请求，以获取带有对象数组的json，其中包含图像详细信息以及图像源URL。然后我将数组传递给我的图像服务的preloadImages方法，我在每个图像中创建一个observable，通过mergeMap将observable传递给preloadImage方法，我在其中创建新的Image（）并加载它。之后我尝试捕获错误并返回一个未定义的observable以保持流存活但我失败了。我已经尝试使用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);
  };
 });
}

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

Answer 1

这是非常正常的rxjs行为，以便在错误时最终确定流。你应该做的是处理错误

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

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

希望这可以帮助。