Как изящно обработать 404 в компоненте Angular?

Я использую Angular 6. И в этом конкретном случае использования нужно обрабатывать 404, а не передавать его компоненту для отображения текстового сообщения в пользовательском интерфейсе.

// code in service
public getVariatioMarginPlugDates(): Observable<Date[]> {
return this._http
              .get<Date[]>(AppSettings.VariationMarginPlugDatesUrl, { withCredentials: true })
              .pipe(catchError(this._trace.handleError('GET ' + AppSettings.VariationMarginPlugDatesUrl, [])));
}

404 также обрабатывается catchError, который использует служебную программу обработки ошибок. Однако я хочу перехватить 404 и потенциально установить некоторую логическую переменную, которую компонент мог бы использовать для отображения полезного сообщения о состоянии в пользовательском интерфейсе (не ища перенаправления 404 или общего всплывающего окна)

Большое спасибо!

// edited code with solution
public getVariatioMarginEmail(runDate: string): Observable<any> {
const url = AppSettings.VariationMarginEmailUrl.replace(this._regExp, runDate);
return this._http
              .get<any>(url, { withCredentials: true })
              .catch(this._trace.handleError('GET ' + url, []));
}

public handleError<T>(operation = 'operation',  result?: T, skipStatus = [404]) {
    return (error: any): Observable<T> => {

      if (skipStatus.includes(error.status)) {
        return observableOf(error.status as T);
      }

      const errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';
      console.error(errMsg);

      const dialog = this._dialogService.open({
        title: 'Server Error',
        content: `${operation} failed: ${errMsg}`,
        actions: [ { text: 'Ok' } ]
      });

      try { this._loggingService.log(errMsg); } catch (error) {}

      return observableOf(result as T); // return empty result
  };
}

На самом деле у меня нет конкретного ответа на этот вопрос, но, возможно, перехватчик ошибок, который передает ошибки субъекту службы, а затем компонент может подписаться, чтобы увидеть, когда возникают ошибки. Затем вы можете использовать любую логику, необходимую для обновления компонента, и другие компоненты также могут ее использовать. Хотя, возможно, для этого потребуется больше кода, чем вы хотели бы написать. И я предполагаю, что вы хотите отловить ошибку для определенного запроса.

Wingnod 07.09.2018 17:31

Привет, Wingnod, у меня есть handleError, который открывает диалоговое окно с соответствующим сообщением NotFound, однако в этом запросе я хочу, чтобы компонент отображал сообщение в определенном месте пользовательского интерфейса, поэтому не хочу, чтобы handleError

Anand 07.09.2018 17:49
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
3 234
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, вам нужно изменить метод обработки ошибки, несколько вариантов:

1) Не вставляйте его здесь в трубу. Тогда ваш компонент получит сообщение об ошибке, и вы сможете проверить код состояния и решить, как вам нужно

2) Измените метод дескриптора, чтобы проверить статус, и повторно выбросите 404, которые компонент может обработать. Вы можете сделать это, если вам все еще нужны другие журналы и т. д. В методе handleError

3) Измените метод дескриптора, чтобы получить конфигурацию, сообщающую ему, какой статус пропустить, 404. Вы можете сделать это, если некоторые компоненты должны получить общий метод, но этот компонент должен обрабатывать свою ошибку сам.

спасибо за идеи, 3) кажется мне вариантом использования - я попробую!

Anand 07.09.2018 17:56

Отличная, классная работа!

bgraham 07.09.2018 19:39

Другие вопросы по теме