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传递一个函数，然后catchError返回另一个函数.具体而言，我的问题是关于嵌入式函数 return(错误:任何):Observable< T>.=>{

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类型的函数?嵌入式功能的错误参数如何接收数据?

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会接收带有参数error的嵌入式函数，但它在同一范围内还具有变量 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来继续可观察的流.返回的可观察对象是由 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屋！