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

Property 'catch' does not exist on type 'Observable<any>'

提问by BrianRT

On the Angular 2 documentation page for using the Http service, there is an example.

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

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

I cloned the angular2-webpack-starterproject and added the above code myself.

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

I imported Observableusing

我Observable使用导入

import {Observable} from 'rxjs/Observable';

I'm assuming the properties Observableare imported as well (.mapworks). Looked at the changelog for rxjs.beta-6 and nothing is mentioned about catch.

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

回答by Thierry Templier

Warning: This solution is deprecated since Angular 5.5, please refer to Trent's answer below

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

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

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

Yes, you need to import the operator:

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

import 'rxjs/add/operator/catch';

Or import Observablethis way:

或以Observable这种方式导入：

import {Observable} from 'rxjs/Rx';

But in this case, you import all operators.

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

See this question for more details:

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

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

• 带有 TypeScript 错误 http.get(...).map 的 Angular HTTP GET 不是 [null] 中的函数

回答by Trent

With RxJS 5.5+, the catchoperator is now deprecated. You should now use the catchErroroperator in conjunction with pipe.

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

RxJS v5.5.2 is the default dependency version for Angular 5.

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

For each RxJS Operator you import, including catchErroryou should now import from 'rxjs/operators' and use the pipe operator.

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

Example of catching error for an Http request Observable

为 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) => {
        ...
      }
    )
  }
  ...
}

Notice here that catchis replaced with catchErrorand the pipeoperator is used to compose the operators in similar manner to what you're used to with dot-chaining.

请注意，这里catch用catchError和pipe运算符替换了运算符，以类似于您习惯使用点链的方式组合运算符。

---

---

See the rxjs documentation on pipable(previously known as lettable) operators for more info.

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

回答by Prince Babbar

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