Свойство 'catch' не существует в типе 'Observable <any>'

На странице документации Angular 2 для использования службы Http приведен пример.

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 works). Посмотрел журнал изменений для rxjs.beta-6, и ничего не упоминается о catch.

Ответ 1

Да, вам нужно импортировать оператор:

import 'rxjs/add/operator/catch';

Или импортируйте Observable следующим образом:

import {Observable} from 'rxjs/Rx';

Но в этом случае вы импортируете все операторы.

См. этот вопрос для получения дополнительной информации:

Angular 2 HTTP GET с ошибкой TypeScript http.get(...). map не является функцией в [null]

Ответ 2

С RxJS 5.5+ оператор catch теперь устарел. Теперь вы должны использовать оператор catchError в сочетании с pipe.

RxJS v5.5.2 - версия зависимости по умолчанию для Angular 5.

Для каждого импортируемого оператора RxJS, включая catchError, вы должны импортировать из "rxjs/operator" и использовать оператор pipe.

Пример ошибки улавливания для запроса Http Наблюдаемый

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

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

Обратите внимание, что catch заменяется на catchError, а оператор pipe используется для компоновки операторов аналогично тому, с чем вы привыкли, с цепочкой точек.

Дополнительную информацию см. в документации rxjs для операторов lettable. https://github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md