服务中的错误处理程序声明的基本 Angular 语法问题

Question

在浏览Angular tutorial 并将其转换为我的目的时，我决定将显示的两种错误处理方法合并为一个，因为我喜欢两者的功能。

这是一站式服务，这是教程中的两种方法：

  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 当它是唯一的参数时，显然以某种方式隐含了它，但是如何呢？

Answer 1

我花了更多的时间。

首先，我确保我拥有最新版本的 TypeScript。我的项目使用的是 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,

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

我在这里建立了一个堆栈闪电战：https://stackblitz.com/edit/angular-simple-retrieve-deborahk

如果您没有看到相同的结果，请告诉我。