プロパティ 'catch'はタイプ 'Observable <any>'に存在しません


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

回答:


246

警告:このソリューションはAngular 5.5から廃止されました。以下のTrentの回答を参照してください

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

はい、オペレーターをインポートする必要があります:

import 'rxjs/add/operator/catch';

または、Observable次の方法でインポートします。

import {Observable} from 'rxjs/Rx';

ただし、この場合は、すべての演算子をインポートします。

詳細については、この質問を参照してください:


2
プロパティが一緒にインポートされない理由を知っていimport {Observable} from 'rxjs/Observable';ますか?それは私にはもっと直感的に思えます。
BrianRT 2016年

6
Rxjsはこのように設計されているためです。rxjs/Observableオペレーターが多いため、モジュールはオペレーターをインポートしません。rxjs/Rxモジュールの輸入は、すべての...私はそれが設計上の選択だと思います。
ティエリーテンプリエ2016年

4
rxjs / Rxからインポートすると、ページの読み込みが非常に遅くなります。rxjs / Rxを使用せず、たとえばrxjs / Observableを使用する場合、リクエスト数をそれと比較してvなし=リクエストの半分
danday74

rxjs / Rxインポートは、しばしばlintさえもしなくなります、それはブラックリストにされたインポートです。過去にこれは一種の大丈夫と見なされていた(そして私はそれを行った)ことを知っていますが、今日では、それは遊んでいる以外の正解の一部になることはありません。
Tim Consolazio

93

RxJS 5.5+では、catchオペレーターは非推奨になりました。このcatchError演算子をと組み合わせて使用する必要がありpipeます。

RxJS v5.5.2は、Angular 5のデフォルトの依存関係バージョンです。

インポートするRxJSオペレーターごとにcatchError、「rxjs / operators」からインポートし、パイプオペレーターを使用する必要があります。

監視可能なHttpリクエストのエラーをキャッチする例

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(以前として知られている賃貸可能詳細は)演算子を。


されるmap(res => res)必要?
Pieter De Bie

1
いいえ、RxJS pipe関数を使用すると、複数の関数を1つの関数に結合できます。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');
  }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.