Pesquisa de site

javascript - Propriedade 'catch' não existe no tipo 'Observable'

Na página de documentação do Angular 2 para uso do serviço Http, há um exemplo.

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

Eu clonei o projeto angular2-webpack-starter e adicionei o código acima eu mesmo.

Eu importei Observable usando

import {Observable} from 'rxjs/Observable';

Estou assumindo que as propriedades Observable também são importadas (.map funciona). Olhei o changelog do rxjs.beta-6 e nada é mencionado sobre catch.

Resposta #1

Aviso: Esta solução está obsoleta desde o Angular 5.5, por favor consulte a resposta do Trent abaixo

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

Sim, você precisa importar o operador:

import 'rxjs/add/operator/catch';

Ou importe Observable desta maneira:

import {Observable} from 'rxjs/Rx';

Mas neste caso, você importa todos os operadores.

Veja esta pergunta para mais detalhes:

  • Erro do Angular HTTP GET com TypeScript http.get(...).map não é uma função em [null]

Resposta #2

Com o RxJS 5.5+, o operador catch agora está obsoleto. Você deve agora usar o operador catchError em conjunto com pipe.

RxJS v5.5.2 é a versão de dependência padrão para o Angular 5.

Para cada operador do RxJS que você importar, incluindo catchError, você agora deve importar de 'rxjs/operators' e usar o operador pipe.

Exemplo de captura de erro para um Observable de requisição 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) => {
        ...
      }
    )
  }
  ...
}

Observe aqui que catch é substituído por catchError e o operador pipe é usado para compor os operadores de forma semelhante ao que você está acostumado com encadeamento por ponto.

Consulte a documentação do rxjs sobre operadores pipable (anteriormente conhecidos como lettable) para mais informações.

Resposta #3

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

Artigos relacionados