angular - this.handleError 不是函数

Question

试图弄清楚为什么 handleError 无法启动。

我们的get api调用结构

get(relativeUrl: string, _httpOptions?: any) {

    var response = this.http.get(baseUrl + relativeUrl, _httpOptions)
          .pipe(
          catchError(this.HandleRequiredErrorResponse)
        ).toPromise();

            var responsedata = new ResponseData;

            responsedata.statusCode = '200';
            responsedata.response = response;

            return responsedata;
}

如果我们通过调用 handleError 函数记录它，而不是我们需要的错误，则此函数处理我们的自定义错误

HandleRequiredErrorResponse(errorReponse: HttpErrorResponse) {
    var response = new ResponseData;

    if (errorReponse.status == 400) {
      response.statusCode = errorReponse.status.toString();
      response.response = errorReponse.error;
    }
    else if (errorReponse.status == 404) {
      response.statusCode = errorReponse.status.toString();
      response.response = errorReponse.error;
    }
    else {
      console.log(errorReponse)
      let err = this.handleError(errorReponse);//handleError is undefined

      return err;
    }

    return new ErrorObservable(response);
  }

这里我们记录一些相关的消息

handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    return new ErrorObservable(
      'Something bad happened; please try again later.');
  }

我的导入是

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
import { catchError } from 'rxjs/operators';

Answer 1

它与函数作用域和闭包有关。 Observable 运算符在幕后创建了许多新的 Observable，使用构造函数创建新对象也会创建新的 this 上下文。 catchError 参数在直接传入时不知道 this 指的是您的组件。

只需将其包装在一个 lambda 函数中:

catchError(err => this.HandleRequiredErrorResponse(err))

Lambda/fat 箭头方法有一个词法 this 值，因此 this 将始终引用调用箭头方法的对象。这减轻了 ton 历史上与 JS 开发相关的头痛。