Question

我的目标是在发生内部服务器错误时添加通用错误警报。下面是我的错误拦截器文件。

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpErrorResponse} from '@angular/common/http';
import { throwError} from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AlertService } from '../_services/alert.service';

@Injectable({
  providedIn: 'root'
})

export class ErrorInterceptorService implements HttpInterceptor {
  constructor(private alertService: AlertService) { }

  intercept(request, next) {
    return next.handle(request).pipe(catchError(this.handleError));
  }

  handleError(err: HttpErrorResponse) {
    console.log(this.alertService); // returns undefined
    this.alertService.error('Internal Server Error'); // does not work
    return throwError(err);
  }
}

我不是Angular的专家，这就是为什么我不知道为什么注入的服务返回未定义的原因，并且在这里我无法使用它。当我从任何组件调用该服务时，它将起作用，但是我不想在代码中的每个HTTP请求中重复调用此警报。我宁愿将其放在拦截器中的一个位置。

Answer 1

替换

this.handleError

通过

error => this.handleError(error)

请注意，由于您只想传播原始错误，因此tap（）运算符更合适：

intercept(request, next) {
  return next.handle(request).pipe(tap(null, error => this.handleError(error)));
}

handleError(err: HttpErrorResponse) {
  console.log(this.alertService); // returns undefined
  this.alertService.error('Internal Server Error');
}

如果愿意，还可以将函数绑定到此：

intercept(request, next) {
  return next.handle(request).pipe(tap(null, this.handleError.bind(this)));
}

Angular-错误拦截器中的调用服务

1 个答案: