Использование catchError для обновления компонента

Вопрос задан: 11 месяцев назад Последняя активность: 11 месяцев назад
up 0 down

Требуется помощь в перехвате HTTP-ошибки в запросе получения Angular HttpClient и передаче ее обратно компоненту, который инициировал запрос, чтобы обработать ошибку удобным для пользователя способом.

В моем приложении Angular 7 есть модуль отчетности, для которого я пытаюсь добавить обработку ошибок. Есть компонент report-listкоторый использует метод changeReport() в общем reports сервис, который обновляет наблюдаемый, который reports-view компонент подписывается на. когда reports-view получает обновленный currentReport (который является идентификатором отчета), он получает полный отчет с сервера с указанным идентификатором отчета.

То, с чем я столкнулся во время макетирования клиентской части этого модуля, это возможность того, что идентификатор отчета, который я пытаюсь получить, не будет существовать, условие, которое я должен быть в состоянии выполнить. В идеале я хотел бы обновить представление отчетов с ошибкой, в которой говорится, что «идентификатор отчета не найден». Я изучал catchError в документации Angular и нашел только примеры его использования в разделе руководства для RxJS и HttpClient и в руководстве по HTTP. Поиск наблюдаемых объектов и труб также не сильно помог. Кто-нибудь знает какие-либо ресурсы, которые я могу прочитать, которые могли бы помочь мне в достижении этой цели, и/или какие связанные концепции мне нужно прочитать и понять, чтобы реализовать то, что я пытаюсь сделать?

reports.service.ts:

export class ReportsService {

  private reportsUrl = 'api/reports';

  /// Establishes the observable used to subscribe to which report to get
  reportSelectionNum: number;
  private reportSelection = new BehaviorSubject<number>(this.reportSelectionNum);
  currentReport = this.reportSelection.asObservable();

  constructor(private http: HttpClient) { }

  /// Allows sibling component to update report
  changeReport(reportID: number) {
    this.reportSelection.next(reportID);
  }

  getReport(id: number): Observable<Report> {
    const url = `${this.reportsUrl}/${id}`;
    return this.http.get<Report>(url).pipe(
      tap(_ => this.log(`getReport(${id})`)),
      catchError(this.handleError<Report>())
    );
  }

отчеты-view.component.ts

export class ReportsViewComponent implements OnInit {

  report: Report;

  reportHeaders: string[];
  reportData: Array<string[]>;

  constructor(private reportsService: ReportsService) { }

  ngOnInit() {
    this.reportsService.currentReport.subscribe(report => {
      if (report) {
        this.getReport(report);
      }
    });
  }

  getReport(id: number): void {
    this.reportsService.getReport(id).subscribe(report => {
      this.report = report;
      this.reportHeaders = this.report.data.shift();
      this.reportData = this.report.data;
    });
  }
}

отчеты-list.component.ts

export class ReportListComponent implements OnInit {

  reports: Report[];

  constructor(private reportsService: ReportsService) { }

  ngOnInit() {
    this.getReports();
  }

  getReports(): void {
    this.reportsService.getReports().subscribe(reports => this.reports = reports);
  }

  setReportID(id: number): void {
    this.reportsService.changeReport(id);
  }

}

Я надеюсь, что компонент представления отчета будет уведомлен, когда возникнет ошибка определенного типа (например, ошибка 404), поэтому я могу соответствующим образом обновить содержимое представления с ошибкой, удобной для потребителя.

1 ответ

Возможно, для Вашего проекта будут необходимы бесплатные векторные карты. На нашем сайте представлены карты для всех стран.

Реклама

up 0 down

Я был направлен в документы RxJS, которые, по-видимому, были там, где я могу найти более подробную информацию о catchError и наблюдаемых.