La proprietà "catch" non esiste sul tipo "Osservabile <any>"

127

Nella pagina della documentazione di Angular 2 per l'utilizzo del servizio Http, c'è un esempio.

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

Ho clonato il progetto angular2-webpack-starter e ho aggiunto il codice sopra.

Ho importato Observableusando

import {Observable} from 'rxjs/Observable';

Suppongo che anche le proprietà Observablevengano importate ( .mapfunziona). Ho esaminato il log delle modifiche per rxjs.beta-6 e non è stato menzionato nulla catch.

— BrianRT
fonte

246

Avvertenza : questa soluzione è obsoleta a partire da Angular 5.5, fare riferimento alla risposta di Trento di seguito

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

Sì, è necessario importare l'operatore:

import 'rxjs/add/operator/catch';

O importa in Observablequesto modo:

import {Observable} from 'rxjs/Rx';

Ma in questo caso, importi tutti gli operatori.

Vedi questa domanda per maggiori dettagli:

HTTP GET angolare con errore TypeScript http.get (...). Map non è una funzione in [null]

— Thierry Templier
fonte

2

Sai perché le proprietà non vengono importate con import {Observable} from 'rxjs/Observable';? Mi sembra più intuitivo.

— BrianRT,

6

Perché Rxjs è progettato in questo modo. Il rxjs/Observablemodulo non importa gli operatori perché ci sono molti operatori. Il rxjs/Rxmodulo importa tutto ... Penso che sia una scelta progettuale.

— Thierry Templier,

4

l'importazione da rxjs / Rx rallenta il caricamento della pagina. confronta il conteggio delle richieste con esso v senza = metà delle richieste quando non usi rxjs / Rx ma usi ad esempio rxjs / Observable

— danday74

L'importazione rxjs / Rx spesso non lascia più nulla, è un'importazione nella lista nera. So che in passato questo è stato visto come un po 'ok (e l'ho fatto), ma al giorno d'oggi non dovrebbe mai far parte di una risposta corretta per qualcosa di diverso da giocare.

— Tim Consolazio,

93

Con RxJS 5.5+, l' catchoperatore è ora obsoleto. Ora dovresti usare l' catchErroroperatore insieme a pipe.

RxJS v5.5.2 è la versione di dipendenza predefinita per Angular 5.

Per ogni operatore RxJS che importi, incluso catchErrorora dovresti importare da "rxjs / operatori" e utilizzare l'operatore pipe.

Esempio di errore di rilevazione per una richiesta HTTP osservabile

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) => {
        ...
      }
    )
  }
  ...
}

Si noti che catchviene sostituito con catchErrore l' pipeoperatore viene utilizzato per comporre gli operatori in modo simile a quello a cui si è abituati con il concatenamento punti.

Per ulteriori informazioni, consultare la documentazione di rxjs sugli operatori pipable (precedentemente noti come lettable ).

— Trent
fonte

è map(res => res)richiesto?

— Pieter De Bie,

1

No, la pipefunzione RxJS ti consente di combinare più funzioni in una singola funzione. La funzione pipe () prende come argomenti le funzioni che si desidera combinare e restituisce una nuova funzione che, quando eseguita, esegue le funzioni composte in sequenza. Tale mappatura non fa nulla, dal momento che tecnicamente è una funzione identitaria.

— Trento

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');
  }

— Prince Babbar
fonte