instanceof returns 儿童 class false

Question

我正在尝试为我的应用程序创建错误处理。我创建了一个名为 AppError 的基础 class。我有特定的错误 classes 扩展 AppError class。例如错误状态 400 的 BadInput class。我正在使用 instanceof 来识别对象的 class。但是 obj instanceof BadInput 总是 returning false 即使我正在创建 BadInput class 的实例。我的代码如下：

app-error.ts

export class AppError {
    constructor (public originalError?: any) {
        console.log(originalError);
    }
}

bad-input.ts

import { AppError } from './app-error';

export class BadInput extends AppError {
    constructor (public originalError?: any) {
        super(originalError);
    }
}

data-service.service.ts

// import statements

export class DataService {
  private _baseUrl = 'dummy.com'

  constructor(private _http: Http) {}

  get http() {
    return this._http;
  }

  makePostRequest (urlSubpath: string, body: Object) {
    return this._http.post(this._baseUrl + urlSubpath, JSON.stringify(body), this.getOptions())
              .map (response => response.json());
  }

  protected handleError(error: Response) {
    if (error.status === 400) {
      return Observable.throw (new BadInput (error.json()));
    } else if (error.status === 404) {
      return Observable.throw (new NotFoundError ());
    } else if (error.status === 500) {
      console.log ('in 500 handling...');
      return Observable.throw (new BadInput (error.json()));
    }

    return Observable.throw (new AppError (error.json()));
  }
}

请注意行 return Observable.throw (new BadInput (error.json())); 在 handleError()

中几次

otp.service.ts

// import statements
@Injectable()
export class OtpCheckerService extends DataService {

  constructor(http: Http) {
    super(http);
   }

   check(body) {
    return super.makePostRequest('Api/VerifyMobile', body)
      .catch(this.handleError);
  }
}

otp.component.ts

// Only providing required code

submit() {
    const body = {
      UserId: this._user.id,
      OTP: this.otp.value
    };

    this._spinner.show ();

    this._otpCheckerService.check(body).subscribe(
      response => {
        this._user.isSignedIn = true;
        this._router.navigate(['/checkout']);
      },
      (error: AppError) => {
        this._spinner.hide();
        if (error instanceof BadInput) {
          console.log ('handling bad input..');
          this._isOtpWrong = true;
        } else {
          throw error;
        }
      },
      () => {
        this._spinner.hide();
      }
    );
  }

为简洁起见，我跳过了一些代码，但如果您需要，我可以将代码放在这里。

Update 1:

我在otp.component.ts中修改了submit()，看看我的全局错误处理程序是否参与其中。更新后的提交方法如下所示：

submit() {
    const body = {
      UserId: this._user.id,
      OTP: this.otp.value
    };

    this._spinner.show ();

    this._otpCheckerService.check(body).subscribe(
      response => {
        this._user.isSignedIn = true;
        this._router.navigate(['/checkout']);
      },
      (error: AppError) => {
        this._spinner.hide();
        if (error instanceof BadInput) {
          console.log ('handling bad input..');
          this._isOtpWrong = true;
        } else if (error instanceof AppError) {
          console.log ('handling app error..');
        } else {
          throw error;
        }
      },
      () => {
        this._spinner.hide();
      }
    );
  }

请注意我正在检查 error instanceof AppError。这也是 return 错误的。全局错误处理程序处理错误。我的全局错误处理程序如下所示：

import { ErrorHandler } from '@angular/core';

export class AppErrorHandler implements ErrorHandler {
    handleError(error: any): void {
        console.log(error);
        alert ('Sorry. An unexpected error occured. Our engineers are fixing it.');
    }
}

Answer 1

给你。显然你得到的不是 JSON （至少在出现错误时）因此，你的 handleError 方法在调用 error.json() 时抛出异常。该异常（一个 Error 对象）是您在订阅中获得的内容，而不是您的 Error 类.

我建议这样做：

protected handleError(error: Response) {
    try {
        if (error.status === 400) {
            return Observable.throw (new BadInput (error.json()));
        } else if (error.status === 404) {
            return Observable.throw (new NotFoundError ());
        } else if (error.status === 500) {
            console.log ('in 500 handling...');
            return Observable.throw (new BadInput (error.json()));
        }

        return Observable.throw (new AppError (error.json()));
    } catch (err) {
        return Observable.throw(new AppError({
           message: err.message,
           stackTrace: err.stack
        }
    }
}

通过这种方式，您可以捕获任何异常，并接收您的类之一，如果这是您想要的。无论如何，现在您知道类型检查失败的原因了。

instanceof returns 儿童 class false

instanceof returns false for children class

inheritance

typescript

typescript2.0

angular