Свойство catch не существует для типа Observable <any>

127

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

javascript angular typescript rxjs BrianRT
источник

Ответы:

246

Предупреждение : это решение устарело с Angular 5.5, см. Ответ Трента ниже

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

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

import 'rxjs/add/operator/catch';

Или импортируйте Observableтак:

import {Observable} from 'rxjs/Rx';

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

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

Тьерри Темплиер
источник
2
Вы знаете, почему свойства не импортируются с помощью import {Observable} from 'rxjs/Observable';? Мне это кажется более интуитивным.
BrianRT
6
Потому что Rxjs устроен так. rxjs/ObservableМодуль не импортирует оператор , потому что есть много операторов. В rxjs/Rxимпорте модуля все ... Я думаю , что это выбор дизайна.
Тьерри Темплиер
4
импорт из rxjs / Rx действительно замедляет загрузку страницы. сравните количество запросов с ним v без = половина запросов, если вы не используете rxjs / Rx, но используете, например, rxjs / Observable
danday74 05
Импорт rxjs / Rx часто больше не будет даже линзать, это импорт в черный список. Я знаю, что в прошлом это считалось чем-то вроде нормального (и я так и поступал), но в настоящее время это никогда не должно быть частью правильного ответа ни на что другое, кроме игры.
Тим Консолацио
93

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

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

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

Пример обнаружения ошибки для 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 (ранее известным как lettable ) для получения дополнительной информации.

Трент
источник
это map(res => res)требуется?
Питер Де Би
1
Нет, pipeфункция RxJS позволяет объединить несколько функций в одну. Функция 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');
  }
Принц баббар
источник