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

127

在使用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。

— 布赖恩
source

246

警告：自Angular 5.5起不推荐使用此解决方案，请参考下面的Trent回答

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

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

import 'rxjs/add/operator/catch';

或以Observable这种方式导入：

import {Observable} from 'rxjs/Rx';

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

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

带有TypeScript错误http.get（...）。map的角度HTTP GET不是[null]中的函数

— 蒂埃里·坦佩利（Thierry Templier）
source

2

您知道为什么不导入属性import {Observable} from 'rxjs/Observable';吗？对我来说，这似乎更直观。

— BrianRT

6

因为Rxjs是这样设计的。该rxjs/Observable模块不会导入运算符，因为运算符很多。该rxjs/Rx模块将全部导入...我认为这是一种设计选择。

— Thierry Templier

4

从rxjs / Rx导入确实减慢了页面加载速度。当您不使用rxjs / Rx但使用例如rxjs / Observable时，比较请求计数与v不等于请求的一半

— danday74 '16

rxjs / Rx导入经常甚至不再掉毛了，这是一个列入黑名单的导入。我知道过去这被认为还可以（而且我已经做到了），但是如今，除了玩耍之外，它永远不应成为正确答案的一部分。

— Tim Consolazio

93

使用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运算符用于组成运算符，其方式与您使用点链时所用的方式相似。

查看该rxjs文档pipable（以前称为可出租获取更多信息）运营商。

— 特伦特
source

是map(res => res)必需的吗？

— Pieter De Bie

1

不，RxJS pipe函数可让您将多个函数组合为一个函数。pipe（）函数将要合并的函数作为其参数，并返回一个新函数，该函数在执行时将按顺序运行组合函数。该映射没有任何作用，因为从技术上讲它是一种身份功能。

— 特伦特

1

In angular 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');
  }

— 巴巴尔王子
source