服务调用在 Angular 5 的错误处理程序中不起作用

Question

我在一个服务中进行了 HTTP 调用，就像它应该的那样，并且在该服务中我向另一个服务发送错误通知。

出于某种原因，如果我在 catchError 管道内进行服务通知调用，它可以正常工作，但如果我在错误处理程序函数内进行它，则它不起作用，不仅如此，错误处理程序内的其余代码是打断了。

例子：

// error message handler
// can not be used inside handleError()
private errorMessageGrowl() {
  this.messageService.add({
      severity: 'error',
      summary: 'Service Error',
      detail: 'An error has occurred'
  });
}

// error handler
private handleError(error: HttpErrorResponse) {

    // this works fine
    console.log('FLAG 1');

    // THIS DOES NOT WORK
    this.errorMessageGrowl();

    // THIS IS NEVER CALLED
    console.log('FLAG 2');

    // return an ErrorObservable with a user-facing error message
    return new ErrorObservable(
        'Something bad happened; please try again later.');
}

// http request
getService(): Observable<any> {

    return this.http.get<any>('./../../assets/data/example.json')
        .pipe(
            retry(4),
            catchError(this.handleError)
        );
}

它重试 4 次，在控制台中显示一次“FLAG 1”日志，但 errorMessageGrowl() 和“FLAG 2”日志从未显示。

现在，如果我从错误处理程序中删除通知服务并在 catchError 管道内调用它，它就可以完美运行：

// error handler
private handleError(error: HttpErrorResponse) {

    // this works fine
    console.log('FLAG');

    // return an ErrorObservable with a user-facing error message
    return new ErrorObservable(
        'Something bad happened; please try again later.');
}

// http request
getService(): Observable<any> {

    return this.http.get<any>('./../../assets/data/example.json')
        .pipe(
            retry(4),
            catchError((error) => {
                this.handleError(error);

                // it works outside handleError()
                this.errorMessageGrowl()
            })
        );
}

Answer 1

通过写作

catchError(this.handleError)

你失去了你的上下文（this没有指向你期望的东西）

替换为

catchError((...args) => this.handleError(...args))
// OR
catchError(this.handleError.bind(this))