小学角语法问题，在服务错误处理程序声明

Posted 2021-04-29

同时通过Angular tutorial去并将其转换为我的目的，我决定，我要在2个品种的错误处理方法的显示成一个组合，因为我都喜欢的功能。

这是一条龙服务，这些都是从教程中的2种方法：

  private handleError1(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred', error.error.message);
    } else {
      console.error(`Backend error code ${error.status}`, 
        `body: ${error.error}`);
    }
    return throwError('Something bad happened');
  }

这被称为是这样，其中Group是我从REST服务器类：

  getGroups(): Observable<Group[]> {
    return this.httpClient.get<Group[]>(`${this.restUrl}/group`).pipe(
        tap(_ => this.log(`fetched groups`)),
        catchError(this.handleError1)
      );
  }

然后可选地，有：

  private handleError2<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(`${operation} failed!`, error);
      return of(result as T);
    }
  }

这被称为是这样的：

  getGroups(): Observable<Group[]> {
    return this.httpClient.get<Group[]>(`${this.restUrl}/group`).pipe(
        tap(_ => this.log(`fetched groups`)),
        catchError(this.handleError2<Group[]>('getGroups', []))
      );
  }

所以，我天真地把我的组合错误处理程序：

private handleError<T>(error: HttpErrorResponse, 
                   operation = 'operation', result?: T) {
....

但我有问题，因为我无法弄清楚如何catchError()内参数化它。这HttpErrorResponse显然在某种程度上暗示时，它的唯一的参数，但如何？

答案

我花了更多的时间在此。

首先，我保证我有一个最近的打字稿的版本。我的项目是使用3.1.1。

这是我的方法：

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.productUrl).pipe(
      tap(data => console.log('All: ' + JSON.stringify(data))),
      catchError(error => this.handleError<Product[]>(error, 'get', [] ))
    );
  }

这是我的错误处理程序：

  private handleError<T>(err: HttpErrorResponse, operation = 'operation', result?: T) {
    // in a real world app, we may send the server to some remote logging infrastructure
    // instead of just logging it to the console
    let errorMessage = '';
    if (err.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      errorMessage = `An error occurred: ${err.error.message}`;
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
    }
    console.error(errorMessage);
    return throwError(errorMessage);
  }

我没有得到任何编译错误与此代码。

我甚至打开我tsconfig.json严格模式：

"strict": true,

它仍然编译时没有语法错误。

我在这里建一个stackblitz：https://stackblitz.com/edit/angular-simple-retrieve-deborahk

让我知道，如果你没有看到相同的结果。