Обрабатывать ошибки HTTP глобально в angular

Я работаю в http обработка ошибок. Я написал обработку ошибок в каждом компоненте, что не является хорошей практикой кодирования. Поэтому я решил написать обычную обработку ошибок http по всему миру. Я искал его, я наткнулся на концепцию http-interceptor, я думаю, что существует лучший способ обработки ошибок HTTP. То, что я пробовал в каждом компоненте, приведено ниже. Вместо этого мне нужен глобальный метод. У меня уже есть файл http-interceptor, и код, который я вставляю ниже.

компонент.ts:

this.serviceName.methodName().catch(err => {
  console.info("Something went wrong with the request, please try again.");
  return Observable.throw(err.message.toUpperCase() || 'API_ERROR');
}).subscribe((res) => {
   console.info(res);
},
 error=>{
    this.openSnackBar('danger', "Something went wrong with the request, please try again.");
 });

http-перехватчик:

import { Injectable } from "@angular/core";
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse } from "@angular/common/http";
import { Observable } from "rxjs";
import { tap } from 'rxjs/operators';

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
constructor() { }

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(tap(
        event => event instanceof HttpResponse ? 'succeeded' : '',
        err => 'failed'
    ))
 }
}

Пожалуйста помоги. Спасибо.

Читать документацию, ничто лучше этого не объясняет перехватчики.
user4676340 27.05.2019 13:07
Тестирование функциональных 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
1
1
1 124
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Попробуй это:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(tap(
      event => event instanceof HttpResponse ? 'succeeded' : '',
      err => {
        this.openSnackBar('danger', "Something went wrong with the request, please try again.");
      }
    ))
  }

Спасибо за ответ, у меня уже есть файл http-interceptor, пожалуйста, проверьте мой ответ еще раз. Пожалуйста, предложите, где написать код «ошибки» из вашего ответа в моем файле http-interceptor.

Prasad Patel 27.05.2019 13:24

Получение ошибки после добавления вашего кода, такого как ERROR in src/app/services/common/httperror.interceptor.ts(15,13): error TS2345: Argument of type '(error: any) => void' is not assignable to parameter of type '() => void'.

Prasad Patel 27.05.2019 13:28

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