web-dev-qa-db-fra.com

La propriété 'catch' n'existe pas sur le type 'Observable <any>'

Sur la page de documentation Angular 2 pour utiliser le service HTTP, vous trouverez un exemple.

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

J'ai cloné le projet angular2-webpack-starter et ajouté le code ci-dessus moi-même.

J'ai importé Observable en utilisant

import {Observable} from 'rxjs/Observable';

Je suppose que les propriétés Observable sont également importées (.map fonctionne). Regardé le journal des modifications pour rxjs.beta-6 et rien n'est mentionné à propos de catch.

javascriptangulartypescriptrxjs
114
BrianRT

Oui, vous devez importer l'opérateur:

import 'rxjs/add/operator/catch';

Ou importez Observable de cette façon:

import {Observable} from 'rxjs/Rx';

Mais dans ce cas, vous importez tous les opérateurs.

Voir cette question pour plus de détails:

233
Thierry Templier

Avec RxJS 5.5+, l'opérateur catch est désormais obsolète. Vous devez maintenant utiliser l'opérateur catchError avec pipe.

RxJS v5.5.2 est la version de dépendance par défaut pour Angular 5.

Pour chaque opérateur RxJS que vous importez, y compris catchError, vous devez maintenant importer à partir de 'rxjs/operators' et utiliser l'opérateur de canal.

Exemple d'erreur de capture pour une requête 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) => {
        ...
      }
    )
  }
  ...
}

Notez ici que catch est remplacé par catchError et que l'opérateur pipe compose les opérateurs de manière similaire à celle à laquelle vous êtes habitué chaînage de points.

Voir la documentation de rxjs sur les opérateurs pipable (précédemment connu sous le nom de lettable ) pour plus d'informations.

77
Trent