将函数传递给 catchError

Question

我定义了一个简单的函数，它将打开一个MatSnackBar 并在 get 请求返回任何错误时显示错误消息

handleError(err: HttpErrorResponse) {
    this.snackBar.open(err.message)
    return throwError(err)
}

因此，当我在构造函数中订阅 observable 时，我将上述函数传递给 catchError

constructor(private snackBack: MatSnackBar) {
...
this._obv$ = this.myService.getTypes().pipe(
  catchError(this.handleError)
)
...

触发错误时，传递给handleError 的err 是正确的，但this.snackBar 是undefined。

当我像这样使用handleError 函数时问题消失了

this._obv$ = this.myService.getTypes().pipe(
  catchError(err => this.handleError(err)
)

有什么区别，为什么是snackBar实例undefined？

Answer 1

问题

问题在于，当在对象上调用函数时，该对象被隐式传递为函数上下文（其this）。有时您会看到这种调用风格称为 method 而不是 function。

方法被隐式地赋予了允许操作其属性的对象。但是，您可以明确说明这种关系。

this.handleError，不调用该函数，它只是传递对它的引用。现在catchError 不知道它需要调用this.handleError(err) 而不是handleError(err)。

一般来说，如果一个函数使用this 关键字，那么调用者负责提供this 上下文。使用点表示法使这非常直观，但在极端情况下会导致奇怪的行为。

---

解决方案：

一种解决方法是使用 lambda 函数为您完成该步骤。 Lamda 函数（使用箭头=> 语法）始终保留相对于它们定义位置的上下文。所以在这种情况下，this 指的是您所期望的。

另一种解决方案是将正确的对象绑定到函数调用（这使您可以将函数作为绑定对象上的方法调用）。这种变通方法在某些情况下更加稳健，因为它允许您将 any 上下文绑定到函数。但是，在这种情况下，您只是绑定当前上下文。

像这样：

constructor(private snackBack: MatSnackBar) {
...
this._obv$ = this.myService.getTypes().pipe(
  catchError(this.handleError.bind(this))
)
...