Angular - Understanding the handleError function of Tour of Heroes

Question

I'm reading this tutorial:
https://angular.io/tutorial/toh-pt6#error-handling

I cannot totally understand the error-handling with the function: handleError.

That function is used on this code snippet:

/** GET heroes from the server */
getHeroes (): Observable<Hero[]> {
  return this.http.get<Hero[]>(this.heroesUrl)
    .pipe(
      tap(heroes => this.log(`fetched heroes`)),
      catchError(this.handleError('getHeroes', []))
    );
}

here is the handleError function:

/**
 * Handle Http operation that failed.
 * Let the app continue.
 * @param operation - name of the operation that failed
 * @param result - optional value to return as the observable result
 */
private handleError<T> (operation = 'operation', result?: T) {
  return (error: any): Observable<T> => {

    // TODO: send the error to remote logging infrastructure
    console.error(error); // log to console instead

    // TODO: better job of transforming error for user consumption
    this.log(`${operation} failed: ${error.message}`);

    // Let the app keep running by returning an empty result.
    return of(result as T);
  };
}

I don't understand what means:

return (error: any): Observable<T> => { ... }?

is that something similar to:

return ((error: any): Observable<T>) => { ... }?

I just want to know what's the source and the destiny of the function.

The more details you can provide about the logic of handleError function, the better. I want to go deep on this.

Those parts of the code that you cited, I can't understand either. I hope an expert will explain them. I did use the handleError function in my app. It worked good for me. I called it from each of my http call methods. The last line return of(result as T); sends a substitute Observable to stand in for the response that would have been returned had not there been an error. — rickz, Jun 23 '18 at 05:36
I think this answer covered what you asked: https://stackoverflow.com/a/52471630/10291121 — Omer, Jan 26 '19 at 16:43

Chunbin Li · Accepted Answer · 2018-06-23T06:25:41.600

Parentheses are optional when there's only one parameter name, you can see more detail from arrow_functions

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; } 

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }

// The parameter list for a function with no parameters should be written with a pair of parentheses.
() => { statements }

Generic

this allows us to capture the type the user provides, it's a type check way of Typescript, you can call it one of the multiple ways.

reference

Typescript Generic

in this example, we use T again as the return type. On inspection, we can now see the type is used for the return type

private handleError<T> (operation = 'operation', result?: T) {
  return (error: any): Observable<T> => {

    ...

    return of(result as T);
  };
}

below example, I will explain Generic how to work with string and number type

// string type (maybe you want to return some mesage when error)
getHeroes (): Observable<Hero[]> {
  return this.http.get<Hero[]>(this.heroesUrl)
    .pipe(
      ...
      catchError(this.handleError<string>('getHeroes', 'my result....'))
    );
}
// similar to : private handleError<number>(operation = 'operation', result ? : number)
//  return (error: any): Observable <number> => { ...
private handleError<T>(operation = 'operation', result? : T) {
  return (error: any): Observable<T> => {

    ...

    // result: my result....
    return of(result);
  };
}


----

// number type (maybe you want to return ID:1234) when error
getHeroes (): Observable<Hero[]> {
  return this.http.get<Hero[]>(this.heroesUrl)
    .pipe(
      ...
      catchError(this.handleError<string>('getHeroes', '1234'))
    );
}
// similar to : private handleError<string>(operation = 'operation', result ? : string) 
//  return (error: any): Observable <string> => { ...
private handleError<T>(operation = 'operation', result? : T) {
  return (error: any): Observable<T> => {

    ...

    // reuslt: 1234
    return of(result);
  };
}

I already knew about what you pointed out, but I want to know about the Generics, also some explanation with the concrete example I posted above. Thanks! — davidesp, Jun 23 '18 at 03:19

Angular - Understanding the handleError function of Tour of Heroes

1 Answers1