《英雄》教程中的 Angular RXJS CatchError

Question

我正在运行 Angular 教程，但我无法理解某一部分实际发生的情况。我通过搜索找到了一些例子，但没有具体回答这个问题。这是代码:

getHeroes (): Observable<Hero[]> {
  return this.http.get<Hero[]>(this.heroesUrl)
    .pipe(
      catchError(this.handleError('getHeroes', []))
    );
} 

接下来是它调用的错误处理程序:

/**
 * 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);
  };
}

我阅读了有关 catchError 的文档。我是 Typescript 的新手，但我真的很喜欢它。好的，问题是为什么我将一个函数传递给 catchError，然后它返回另一个函数。具体来说，我的问题是关于嵌入函数return (error: any): Observable<T> => {

为什么handleError返回一个带有粗箭头表示法的函数，而不只是一个T类型的可观察值？内嵌函数接收数据的error参数如何？

我认为这与调用handleError有关，它返回一个函数。所以本质上 catchError 接收带有参数 error 的嵌入函数，但它也有变量 operation和result?在相同的范围内，因此它可以与这些一起工作。 catchError 然后将数据传递给参数 error 并返回一个可观察的 T。

RXJS 引用将 catchError 定义为:

catchError<T, R>(selector: (err: any, caught: Observable<T>) =>
ObservableInput<R>): OperatorFunction<T, T | R>

但是我很难解释为什么它会像所有示例一样被传递给一个函数。

Answer 1

您的假设是正确的:首先调用 handleError 函数，该函数本身创建一个用于处理错误的函数。还有其他几种编写方法可能有助于进一步澄清:

// write the function inline:
catchError(error => {
  console.error(error);
  this.log(`getHeroes failed: ${error.message}`);
  return of([]);
});

// call `handleError` first to get the error handler and pass it as a variable.
const errorHandler = this.handleError('getHeroes', []);
return this.http.get<Hero[]>(this.heroesUrl)
  .pipe(catchError(errorHandler));

catchError 需要传递给它的函数，该函数返回一个 Observable 以继续可观察流。返回的 observable 是由 of 创建的。类型 T 允许错误处理程序根据您传入的后备参数确定 Observable 发出的值的类型。