'Observable<any>' 类型上不存在属性 'catch'答案

【问题标题】：Property 'catch' does not exist on type 'Observable<any>''Observable<any>' 类型上不存在属性 'catch'
【发布时间】：2016-09-01 14:31:43
【问题描述】：

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

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

我克隆了angular2-webpack-starter 项目并自己添加了上述代码。

我使用

导入了Observable

import {Observable} from 'rxjs/Observable';

我假设属性Observable 也被导入（.map 有效）。查看了 rxjs.beta-6 的更改日志，没有提到关于 catch 的内容。

【问题讨论】：

标签： javascript angular typescript rxjs

【解决方案1】：

警告：此解决方案自 Angular 5.5 起已弃用，请参阅下面 Trent 的回答

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

是的，你需要导入操作符：

import 'rxjs/add/operator/catch';

或者这样导入Observable：

import {Observable} from 'rxjs/Rx';

但在这种情况下，您需要导入所有运算符。

查看这个问题了解更多详情：

Angular HTTP GET with TypeScript error http.get(...).map is not a function in [null]

【讨论】：

您知道为什么不使用import {Observable} from 'rxjs/Observable'; 导入属性吗？这对我来说似乎更直观。
因为 Rxjs 是这样设计的。 rxjs/Observable 模块不导入运算符，因为有很多运算符。 rxjs/Rx 模块全部导入...我认为这是一种设计选择。
从 rxjs/Rx 导入确实会降低页面加载速度。当你不使用 rxjs/Rx 但使用例如 rxjs/Observable 时，将请求计数与它进行比较 v without = 一半的请求
rxjs/Rx 导入经常不再 lint，这是一个列入黑名单的导入。我知道在过去这被认为是可以的（而且我已经做到了），但现在它不应该成为除了玩弄之外的任何正确答案的一部分。

【解决方案2】：

在 RxJS 5.5+ 中，catch 运算符现已弃用。您现在应该将catchError 运算符与pipe 结合使用。

RxJS v5.5.2 是 Angular 5 的默认依赖版本。

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

捕获 Http 请求 Observable 错误的示例

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 文档。

【讨论】：

是否需要map(res => res)？
不，RxJS pipe 函数允许您将多个函数组合成一个函数。 pipe() 函数将要组合的函数作为其参数，并返回一个新函数，该函数在执行时按顺序运行组合函数。该映射没有任何作用，因为它在技术上是一个身份函数。

【解决方案3】：

角度 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');
  }

【讨论】：