Angular 2 - 구독에서 서버 오류 확인

Angular 2 - 구독에서 서버 오류 확인

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

시나리오는 다음과 같습니다.

1. 서버에서 유효하지 않은 양식 제출(개체 만들기)
2. 서버가 양식에 표시되는 오류와 함께 400개의 잘못된 요청을 반환합니다.
3. 구독이 돌아온 후 오류 변수 같은 것을 확인하고 싶습니다(예: 오류가 없으면 > 새로 만든 상세 페이지로 이동).

저는 이것이 다음과 같이 작동한다고 생각합니다.

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

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

저는 Angular 2가 매우 생소하기 때문에 관찰 가능한 기능에 대한 이해가 부족했기 때문일 수 있습니다.양식에 해당 데이터를 표시하는 데는 문제가 없지만 ts 구성 요소 내에서 데이터를 보는 방법을 알 수 없습니다.저는 정말로 http create의 성공/실패를 확인하고 싶습니다.

관련 RxJS 문서에 명시된 대로, 메소드는 오류가 없는 경우 완료 시 호출되는 세 번째 인수를 취할 수 있습니다.

참조용:

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

---

참고로, 통화의 성공/실패에 관계없이 완료 시 호출되는 방법도 있습니다.이는 결과에 관계없이 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
      }
    );

콜백이 포함된 이전 구문은 6.4에서 더 이상 사용되지 않으며 8.0에서 제거될 예정입니다.대신에

of([1,2,3]).subscribe(
    (v) => console.log(v),
    (e) => console.error(e),
    () => console.info('complete') 
)

이제 사용해야 합니다.

of([1,2,3]).subscribe({
    next: (v) => console.log(v),
    error: (e) => console.error(e),
    complete: () => console.info('complete') 
})

https://https://devjs.dev/권장사항/https-messages

다음과 같은 방법으로 달성할 수 있습니다.

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

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

rxjs way 2022 업데이트

this.projectService.create(project)
    .subscribe({
      next: (data)=>console.log('data',data),
      error: (err)=>console.log('error',err),
      complete:()=>console.log('complete')
    });

언급URL : https://stackoverflow.com/questions/42104629/angular-2-checking-for-server-errors-from-subscribe