Question

我正在努力解决一个问题。如果你们可以请帮助我。提前致谢。我想从我的服务组件中抛出自定义错误对象。

修改：为什么我要创建自定义错误类？我有一个使用Angular 5构建的网站，我将使用Ionic3 + Angular5构建一个移动应用程序。我想建立两个独立的“前端”项目，并在这两个项目之间共享我的服务。后端API返回自定义错误JSON，如下所示：

"error": {
    "statusCode": 400,
    "error": "Bad Request",
    "messages": ["Custom message from the back-end API"]
}

我的自定义错误类将封装这些错误，我将在两个应用程序之间共享这些自定义错误对象。最后，每个应用程序将管理/处理这些错误。（我不确定这是一个好方法，我只是测试它）。 结束修改。

我构建了以下代码：

离子版：

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0
cordova (Cordova CLI) : 8.0.0
@ionic/app-scripts : 3.1.8
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2

我创建了一个空白的离子项目：

$ ionic start testIonic blank --type=ionic-angular

然后我创建了三个对象来封装自定义错误：

export class MyAppError{

    private statusCode : number;
    private defaultMessage: string;
    private customMessages: string[];

    constructor(private originalError: Response) {
        // logic to get/extract the Custom Error JSON
    }

    getOriginalError() : Response {   return this.originalError;     }
    gettatusCode() : number {         return this.statusCode;    }
    getDefaultMessage() : string {    return this.defaultMessage;   }
    getCustomMessages() : string[] {  return this.customMessages;    }
}

export class MyAppNotFoundError extends MyAppError {
}

export class MyAppConnectionError extends MyAppError {
}

我的服务类从API（getAllCountries函数）获取国家/地区列表。 handleError函数抛出自定义错误对象：

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Country } from '../_model/country';
import { MyAppError } from '../_error_handlers/myapp-error';
import { MyAppConnectionError } from '../_error_handlers/myapp-connection-error';
import { MyAppNotFoundError } from '../_error_handlers/myapp-notfound-error';

@Injectable()
export class CountryService {

  public BASE_URL = 'http://localhost:8080/myapp/api/v1/country';

  constructor( private http: HttpClient) { }

  getAllCountries(): Observable<Country[]>{
    return this.http.get<Country[]>( this.BASE_URL + "/get-all" )
      .catch( this.handleError );
  }

  protected handleError(error: Response) : Observable<any> {
    if (!error.status || error.status === 0){
      return Observable.throw( new MyAppConnectionError(error) );
    }
    if (error.status === 404){
      return  Observable.throw( new MyAppNotFoundError(error) );
    }
    return  Observable.throw( new MyAppError(error) );
  }
}

国家级：

export class Country{
    countryId:  string;
    description: string;
}

我已将CountryService添加到app.module.ts：

  providers: [ 
    StatusBar,
    SplashScreen,
    CountryService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

我还将HttpClientModule添加到了app.module.ts：

  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp),
  ],

我从home.ts致电该服务：

  getAllCountries(){
    this.countryService.getAllCountries()
      .subscribe(
        (list)=>{
          this.countries = list;
        },
        (error : MyAppError) => {
          console.log("Debug1: " + error );
          console.log("Debug2: " + (error instanceof MyAppError) );
          console.log("Debug3: " + (error instanceof MyAppNotFoundError) );
          console.log("Debug4: " + (error instanceof MyAppConnectionError) );
        }
      );
  } // end method

我在home.html上放了一个简单的按钮来调用该功能：

<button ion-button (click)="getAllCountries()">Button</button>

主要意思是：

当我的API网址关闭，或者我没有连接到互联网时，则错误.status === 0.它返回Observable.throw（新的MyAppConnectionError（错误））。
当我使用错误的URL测试此代码时，则error.status === 404.它返回Observable.throw（new MyAppNotFoundError（error））。

然而，当我点击按钮时，我在home.ts中的功能会打印到浏览器控制台：

Debug1: TypeError: __WEBPACK_IMPORTED_MODULE_2_rxjs_Observable__.Observable.throw is not a function
home.ts:28 Debug2: false
home.ts:29 Debug3: false
home.ts:30 Debug4: false

我没有收到MyAppError或MyAppNotFoundError或MyAppConnectionError对象实例，即使它们已从我的服务中抛出。你能帮我理解我做错了什么吗？非常感谢你。（英语不是我的第一语言，请原谅任何错误）。

Answer 1

我添加了以下内容＆＃34; import＆＃34;在CountryService类中：

import 'rxjs/add/observable/throw';

现在有效。我能够获得一个MyAppError对象实例。

Ionic 3 - 如何抛出自定义错误对象

1 个答案: