각도 2 - 구독으로 인한 서버 오류 확인

Question

이 시나리오가 각도 2 문서에 있어야한다고 생각하지만 어디서나 찾을 수 없습니다.

여기에 서버가 구독 돌아 오면 난 후 형태

에 표시 오류가 400 잘못된 요청을 반환

서버에 유효하지 않은 시나리오

1. (객체를 생성) 양식을 제출입니다 오류 변수 또는 무언가를 확인하고 싶습니다. (예 : 오류가없는 경우 새로 작성한 세부 정보 페이지로 연결)

다음과 같이 작동하는 것으로 상상해보십시오 :

this.projectService.create(project) 
    .subscribe(
     result => console.log(result), 
     error => { 
      this.errors = error 
     } 
    ); 
} 

if (!this.errors) { 
    //route to new page 
} 

나는 Observable의 작동 방식에 대한 나의 이해 부족으로 인해 Angular 2에 새로워졌습니다. 양식에 해당 데이터를 표시하는 데는 문제가 없지만 TS 구성 요소 내에서 데이터를 보는 방법을 파악할 수는 없습니다. 나는 단지 HTTP 생성의 성공/실패를 확인하기를 원한다.

Answer 1

관련 RxJS 설명서에서 설명한 것처럼 오류가없는 경우 .subscribe() method은 완료시 호출되는 세 번째 인수를 사용할 수 있습니다. 참고로

:

1. [onNext] (Function) 함수는 관찰 시퀀스의 각 요소에 대한 호출.
2. [onError] (Function) : 관찰 가능한 시퀀스의 예외적 종료시 호출하는 함수.
3. [onCompleted] (Function) : 관찰 가능한 시퀀스의 정상 종료시 호출 할 함수. 이 (가 호출 될 때 오류가 없을 것이라는 점을 의미한다) 우아한 종료시 호출 할 것이기 때문에

따라서 당신은 onCompleted 콜백 라우팅 로직을 처리 할 수 ​​있습니다. 사이드 참고로

---

this.httpService.makeRequest() 
    .subscribe(
     result => { 
     // Handle result 
     console.log(result) 
     }, 
     error => { 
     this.errors = error; 
     }, 
    () => { 
     // 'onCompleted' callback. 
     // No errors, route to new page here 
     } 
    ); 

도없이 호출의 성공/실패 완료시 호출되는 .finally() method있다. 이는 결과에 관계없이 HTTP 요청 후 특정 로직을 항상 실행하려는 경우 (예 : 로깅 또는 모달 표시와 같은 일부 UI 상호 작용의 경우)에 도움이 될 수 있습니다.

Rx.Observable.prototype.finally(action)

는 관찰 순서가 정상적으로 또는 예외적으로 종료 소스 후 지정된 조치를 호출합니다.예를 들어

가 여기에 기본적인 예입니다

import { Observable } from 'rxjs/Rx'; 
import 'rxjs/add/operator/finally'; 

// ... 

this.httpService.getRequest() 
    .finally(() => { 
     // Execute after graceful or exceptionally termination 
     console.log('Handle logging logic...'); 
    }) 
    .subscribe (
     result => { 
     // Handle result 
     console.log(result) 
     }, 
     error => { 
     this.errors = error; 
     }, 
    () => { 
     // No errors, route to new page 
     } 
    ); 

Answer 2

당신은 내가 관찰 가능한의 오류 처리에 관한 발견 모든 해답 중 방법

this.projectService.create(project) 
    .subscribe(
     result => { 
     console.log(result); 
     }, 
     error => { 
      console.log(error); 
      this.errors = error 
     } 
    ); 
} 

if (!this.errors) { 
    //route to new page 
}