Как / где я проверяю http-ошибки при повторном вызове API?

Question

Я вообще не знаю, где / как ловить http-ошибки, когда я неоднократно вызываю API?

Я играл с загрузкой фиктивных изображений из lorempicsum и, конечно, хотел бы пойматьhttp-errors.

Я пробовал rxjs catchError () внутри метода, где я делаю свои вызовы, но потом мне пришлось возвращать of (ПУСТО), и это ни к чему меня не привело.Тогда я понял, что я не знаю, где следует ловить http-ошибки, когда я использую оператор канала.Это вообще возможно?Я имею в виду, например, если один из пяти вызовов завершится неудачно, поймать ошибку, сделать что-то и подписаться на успешные результаты?

В конце я хотел бы отображать серое поле для каждого неудачного вызова, но я незнаете, как добраться отсюда ...

Thx

Вот мой сервис изображений

@Injectable()
export class MockImageService {
  constructor(private httpClient: HttpClient, private readonly sanitizer: DomSanitizer) {}

  getRandomImageBlobs(
    numberOfImages: number,
    widthInPx: number,
    heightInPx: number
  ): Observable<Blob> {
    return this.httpClient
      .get(`https://picsum.photos/${widthInPx}/${heightInPx}/?random`, {
        headers: { 'Content-Type': 'image/jpg' },
        responseType: 'blob'
      })
      .pipe(repeat(numberOfImages));
  }

  getSafeURL(blob: Blob): SafeUrl {
    const objectURL = window.URL.createObjectURL(blob);
    const sanitizedObjectURL = this.sanitizer.sanitize(SecurityContext.URL, objectURL);
    return this.sanitizer.bypassSecurityTrustUrl(objectURL);
  }
}

мой компонент, который его использует

import { Component, OnInit, Input } from '@angular/core';
import { MockImageService } from '../../services/mock-image.service';
import { SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-random-image-display',
  template: `
  <div class="container" fxLayout="row wrap" fxLayoutAlign="center" fxLayoutGap="4px">
    <div *ngFor="let url of safeURLs">
      <img [src]="url"/>
    </div>
  </div>
  `,
  styles: []
})
export class RandomImagesComponent implements OnInit {
  @Input() numberOfImages: number;
  @Input() widthInPx: number;
  @Input() heightInPx: number;

  public safeURLs: SafeUrl[] = [];

  constructor(private imgService: MockImageService) {}

  ngOnInit() {
    // TODO catch invalid formats / http errors!
    this.imgService
      .getRandomImageBlobs(this.numberOfImages, this.widthInPx, this.heightInPx)
      .subscribe((blob: Blob) => {
        this.safeURLs.push(this.imgService.getSafeURL(blob));
      });
  }
}

и часть содержащих его компонентов html

<app-random-image-display
  [numberOfImages]="5"
  [widthInPx]="200"
  [heightInPx]="300"
></app-random-image-display>

Answer 1

Я бы предложил вам создать более централизованный механизм обработки ошибок.Это может быть достигнуто с помощью HttpInterceptor .Любая ошибка HTTP вызовет метод catchError, как показано ниже

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError as observableThrowError } from 'rxjs';
import { catchError } from 'rxjs/operators';



@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return next.handle(req).pipe(
      catchError((err: any, caught: Observable<any>) => {

        // Handle the error here

        return observableThrowError(err);
      }));
  }
}

Зарегистрируйте перехватчик в AppModule или CoreModule

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';


@NgModule({
  providers: [
      { 
        provide: HTTP_INTERCEPTORS, 
        useClass: MyHttpInterceptor, 
        multi: true }
  ]
})
export class CoreModule {
// rest of code
}

Answer 2

Полагаю, вы захотите добавить еще один метод обратного вызова внутри подписки для getRandomImageBlobs.

.getRandomImageBlobs(this.numberOfImages, this.widthInPx, this.heightInPx)
.subscribe((blob: Blob) => {
  this.safeURLs.push(this.imgService.getSafeURL(blob));
}, (error: any) => {
  // handle error
});