'Observable <any>'유형에 'catch'특성이 없습니다.


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

6
Rxjs는 이와 같이 설계 되었기 때문입니다. rxjs/Observable사업자가 많이 있기 때문에 모듈은 연산자를 가져 오지 않습니다. rxjs/Rx모듈 수입은 모두 ... 나는 그것이 디자인 선택 있다고 생각합니다.
Thierry Templier

4
rxjs / Rx에서 가져 오기하면 실제로 페이지로드 속도가 느려집니다. 유 예를 들어 rxjs / 관찰 가능한 위해 사용 rxjs / 수신하지만, 사용하지 말아 때 = 절반의 요청없이 V를 요청 수를 비교
danday74

rxjs / Rx 가져 오기는 더 이상 보푸라기조차하지 않으며, 블랙리스트 가져 오기입니다. 나는 과거에 이것이 일종의 괜찮은 것으로 보았지만 (내가 해본 적이 있음) 요즘에는 놀지 않는 것 이외의 다른 것에 대한 정답의 일부가되어서는 안됩니다.
Tim Consolazio

93

RxJS 5.5 catch이상 에서는 운영자가 더 이상 사용되지 않습니다. 이제 catchError연산자를와 함께 사용해야합니다 pipe.

RxJS v5.5.2는 Angular 5의 기본 종속성 버전입니다.

수입하는 각 RxJS Operator에 대해 catchError이제 'rxjs / operators'에서 가져와 파이프 연산자를 사용해야합니다.

HTTP 요청 Observable에 대한 catch 오류의 예

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 (이전으로 알려진 lettable 대한 추가 정보를 원하시면) 연산자.


되어 map(res => res)필요?
Pieter De Bie

1
RxJS pipe기능을 사용하면 여러 기능을 단일 기능으로 결합 할 수 있습니다. pipe () 함수는 결합하려는 함수를 인수로 취하고 실행시 작성된 함수를 순서대로 실행하는 새 함수를 리턴합니다. 이 매핑은 기술적으로 아이덴티티 기능이므로 아무 것도 수행하지 않습니다.
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');
  }
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.