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

Question

这个问题在这里已经有了答案:

How to access the correct `this` inside a callback (13 个回答)

关闭 4年前.

我的 HTTP 调用应该在一个服务中，并且在该服务中我为另一个服务注入(inject)错误通知。

出于某种原因，如果我在 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))