Heroes 教程中的 Angular RXJS CatchError [英] Angular RXJS CatchError in Heroes tutorial

问题描述

我正在运行 Angular 教程，但我无法理解某一部分实际发生了什么.我从搜索中找到了一些示例，但没有具体回答这个问题.代码如下:

I'm running the Angular tutorial and I can't understand what is actually happening in one section. I've found some examples from searching, but nothing specifically answers this question. Here is the code:

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

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

Next is the error handler it calls:

/**
 * 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=>{

I read the documentation I could find on catchError. I'm new to Typescript and really enjoying it though. Okay, so the question is why I'm passing a function to catchError, which then returns another function. Specifically, my question is about the embedded function return (error: any): Observable<T> => {

为什么handleError 返回一个带有粗箭头符号的函数而不是一个类型为T 的observable?内嵌函数接收数据的error参数如何?

Why is handleError returning a function with fat arrow notation instead of just an observable of type T? How is the error parameter of the embedded function receiving data?

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

I think it has something to do with the fact that handleError is called, which returns a function. So in essence catchError receives that embedded function with the parameter error, but it also has the variables operation and result? in the same scope so it can work with those. catchError then passes the data to the parameter error and returns an observable T.

RXJS 参考将 catchError 定义为:

RXJS Reference defines catchError as:

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

但是我很难理解为什么像所有示例一样传递一个函数.

But it's hard for me to decipher why it's being passed a function as all the example have.

推荐答案

您的假设是正确的:handleError 函数首先被调用，它本身创建了一个用于处理错误的函数.还有其他几种写法可能有助于澄清一点:

Your assumptions are correct: the handleError function gets called first which itself creates a function for handling the error. There are a couple of other ways to write this that might help clarify a bit more:

// 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 需要一个 function 传递给它，该函数返回一个 Observable 以继续 observable 流.返回的 observable 是由 of 创建的.类型 T 允许错误处理程序根据您传入的回退参数确定 Observable 发出的值的类型.

catchError requires a function passed to it that returns an Observable to continue the observable stream. The returned observable is created by of. The type T allows the error handler to determine the type of the values emitted by the Observable based on the fallback argument you've passed in.

这篇关于Heroes 教程中的 Angular RXJS CatchError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！