在 angular 中全局处理 HTTP 错误

Question

我正在 http 错误处理 工作。我在每个组件中都写了错误处理，这不是一个好的编码习惯。所以我决定编写一个全局通用的 http 错误处理。我搜索过它，遇到了 http-interceptor 概念，我认为存在更好的方法来处理 HTTP 错误。下面是我在每个组件中尝试过的方法，而不是我需要一个全局方法。我已经有了 http-interceptor 文件，代码是我粘贴在下面的。

component.ts:

this.serviceName.methodName().catch(err => {
  console.log("Something went wrong with the request, please try again.");
  return Observable.throw(err.message.toUpperCase() || 'API_ERROR');
}).subscribe((res) => {
   console.log(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'
    ))
 }
}

请帮忙。谢谢

Answer 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.");
      }
    ))
  }

在 angular 中全局处理 HTTP 错误

Handle HTTP Errors globally in angular

http-error

angular