Die Eigenschaft 'catch' ist für den Typ 'Observable <any>' nicht vorhanden.

127

Auf der Angular 2-Dokumentationsseite zur Verwendung des HTTP-Dienstes finden Sie ein Beispiel.

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

Ich habe das Angular2-Webpack-Starter- Projekt geklont und den obigen Code selbst hinzugefügt.

Ich importierte ObservableVerwendung

import {Observable} from 'rxjs/Observable';

Ich gehe davon aus, dass die Eigenschaften Observableauch importiert werden ( .mapfunktioniert). Ich habe mir das Changelog für rxjs.beta-6 angesehen und nichts wird darüber erwähnt catch.

javascript angular typescript rxjs BrianRT
quelle

Antworten:

246

Warnung : Diese Lösung ist seit Angular 5.5 veraltet. Weitere Informationen finden Sie in der folgenden Antwort von Trent

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

Ja, Sie müssen den Operator importieren:

import 'rxjs/add/operator/catch';

Oder importieren Sie auf Observablediese Weise:

import {Observable} from 'rxjs/Rx';

In diesem Fall importieren Sie jedoch alle Operatoren.

Siehe diese Frage für weitere Details:

Thierry Templier
quelle
2
Wissen Sie, warum die Eigenschaften nicht mit importiert werden import {Observable} from 'rxjs/Observable';? Das erscheint mir intuitiver.
BrianRT
6
Weil Rxjs so gestaltet ist. Das rxjs/ObservableModul importiert keine Operatoren, da es viele Operatoren gibt. Das rxjs/RxModul importiert alles ... Ich denke, dass es eine Design-Wahl ist.
Thierry Templier
4
Das Importieren von rxjs / Rx verlangsamt das Laden der Seite sehr. Vergleiche die Anzahl der Anfragen damit v ohne = die Hälfte der Anfragen, wenn du nicht rxjs / Rx verwendest, sondern zum Beispiel rxjs / Observable
danday74
Der rxjs / Rx-Import wird häufig nicht einmal mehr fusseln, sondern wird auf die schwarze Liste gesetzt. Ich weiß, dass dies in der Vergangenheit als in Ordnung angesehen wurde (und ich habe es getan), aber heutzutage sollte es nie Teil einer richtigen Antwort für etwas anderes sein, als herumzuspielen.
Tim Consolazio
92

Mit RxJS 5.5+ ist der catchBediener jetzt veraltet. Sie sollten jetzt den catchErrorOperator in Verbindung mit verwenden pipe.

RxJS v5.5.2 ist die Standardabhängigkeitsversion für Angular 5.

Für jeden RxJS-Operator, den Sie importieren, catchErrorsollten Sie jetzt aus 'rxjs / operator' importieren und den Pipe-Operator verwenden.

Beispiel für einen abfangenden Fehler für eine HTTP-Anforderung 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) => {
        ...
      }
    )
  }
  ...
}

Beachten Sie hier, dass catchdurch ersetzt wird catchErrorund der pipeOperator verwendet wird, um die Operatoren auf ähnliche Weise zusammenzusetzen, wie Sie es bei der Punktverkettung gewohnt sind.

Weitere Informationen finden Sie in der rxjs-Dokumentation zu pipable- Betreibern (früher als vermietbar bezeichnet ).

Trent
quelle
ist map(res => res)erforderlich?
Pieter De Bie
1
Nein, mit der RxJS- pipeFunktion können Sie mehrere Funktionen zu einer einzigen Funktion kombinieren. Die Funktion pipe () verwendet als Argumente die Funktionen, die Sie kombinieren möchten, und gibt eine neue Funktion zurück, die bei Ausführung die zusammengesetzten Funktionen nacheinander ausführt. Diese Zuordnung bewirkt nichts, da es sich technisch gesehen um eine Identitätsfunktion handelt.
Trent
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');
  }
Prinz Babbar
quelle