类型“Observable”上不存在属性“catch”

Question

在Angular 2使用Http服务的文档页面上，有一个示例。

getHeroes (): Observable<Stuff[]> {
  return this.http.get(this.url)
                  .map(this.extractData)
                  .catch(this.handleError);
}

我克隆了angular2 webpack初学者项目，并自己添加了上述代码。

我导入观察使用

import {Observable} from 'rxjs/Observable';

我假设属性可观察的也被导入（. map起作用）。查看了rxjs.beta-6的更改日志，没有提到任何关于catch的内容。

Answer 1

在角8：

//for catch:
import { catchError } from 'rxjs/operators';

//for throw:
import { Observable, throwError } from 'rxjs';

//and code should be written like this.

getEmployees(): Observable<IEmployee[]> {
    return this.http.get<IEmployee[]>(this.url).pipe(catchError(this.erroHandler));
  }

  erroHandler(error: HttpErrorResponse) {
    return throwError(error.message || 'server Error');
  }

Answer 2

在RxJS 5.5中，catch操作符现在已不推荐使用。现在，您应该将catchError操作符与pipe结合使用。

rxjsv5。5.2是Angular 5的默认依赖版本。

对于您导入的每个RxJS操作符，包括catchError，您现在应该从“RxJS/operators”导入并使用管道操作符。

import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
...

export class ExampleClass {
  constructor(private http: HttpClient) {
    this.http.request(method, url, options).pipe(
      catchError((err: HttpErrorResponse) => {
        ...
      }
    )
  }
  ...
}

请注意，catch被替换为catchError，而pipe操作符用于以与点链接类似的方式组合操作符。

有关更多信息，请参阅Pipable（以前称为lettable）运算符上的rxjs留档。

Answer 3

警告：自Angular 5.5以来，此解决方案已被弃用，请参考下面Trent的答案

=====================

是的，您需要导入运算符：

import 'rxjs/add/operator/catch';

或者通过以下方式导入可观察的：

import {Observable} from 'rxjs/Rx';

但在本例中，您将导入所有运算符。

有关更多详细信息，请参见此问题：

• Angular HTTP GET与TypeScript错误http.get（...）. map不是一个函数在[null]