Перехват ошибки и возврат (неопределенный) останавливает поток (Angular 7, rxjs6) - PullRequest
Новая
       25

Перехват ошибки и возврат (неопределенный) останавливает поток (Angular 7, rxjs6)

0 голосов
/ 13 марта 2019

Мне нужно предварительно загрузить изображения в кеш браузера перед их отображением. Во-первых, я делаю запрос http get, чтобы получить json с массивом объектов, содержащих детали изображения, а также URL источника изображения. Затем я передаю массив методу preloadImages моего сервиса изображений, где я создаю наблюдаемое из каждого изображения, передаю наблюдаемое методу preloadImage через mergeMap, где создаю новый 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? В моей подписке было бы идеально получить массив загруженных изображений и удалить те, которые не загружены. Заранее спасибо

1 Ответ

0 голосов
/ 13 марта 2019

это вполне нормальное поведение rxjs для завершения потока в случае ошибки.Что вы должны сделать, это обработать ошибку в 

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

В этой функции обработки ошибок ( this.handleError (error) ) вам фактически придется иметь дело с ошибкой, а затем перезапустить поток .

Надеюсь, это поможет.

...