처리되지 않은 예외는 구독 실패로 이어질 수 있으며 버튼을 클릭해도 아무런 결과가 없을 때 사용자가 좌절할 수 있습니다.

Rxjs로 가능한 오류 처리 전략에 대해 읽을 수 있습니다here.

기능적 관점에서 예상(네트워크 호출) 및 예상치(0으로 나누기)의 두 종류의 실패가 있습니다. 첫 번째는 애플리케이션이 충돌해서는 안 됩니다.

Expected error is an operation which either fail or return data.

일반적으로 데이터 모델은 다음과 같이 표현됩니다.

interface Datum<T> {
  data?: T;
  error?: any
}

이 프레젠테이션을 사용하면 데이터에 액세스하기 전에 항상 자신을 확인하여 오류가 있는지 여부를 확인해야 합니다.



또한 데이터가 선택 사항이 되어 향후 새로운 오류가 발생할 수 있습니다. 데이터 및 오류를 처리하는 다른 접근 방식이 있으며 러시아어 프레젠테이션에서 크게 다룹니다(러시아어를 할 줄 모르는 경우 자막을 켜는 것이 좋습니다. 정말 가치가 있습니다)


샘플 날씨 앱에서 또 다른 접근 방식을 보여드리겠습니다. 다음은 그 모습입니다.


첫 번째 순진한 구현 - 다른 보기를 처리하기 위한 별도의 속성 및 ngIfElse( stackblitz )




이제 우리는 @sweet-monads\either의 어느 한 유형을 사용할 것입니다. 이는 실제로 간단한 어느 쪽 유형에 대한 많은 추가 메서드를 제공하기 때문입니다.

type Either<Error, Data> = Error | Data;

그래서 우리의 경우에는 데이터와 오류에 대한 추상화를 갖게 될 것입니다. 이 중 어떤 것이라도 포함할 수 있는 컨테이너입니다. 우리의 삶을 더 쉽게 만들기 위해 각도 지시문의 가장 큰 기능 중 하나를 사용할 것입니다! 새로운 지시어인 IfRight 및 IfLeft를 살펴보십시오.



( stackblitz )

TypeScript에서 추가 속성을 제거할 수 있었지만 템플릿이 이전보다 무거워졌습니다. 나중에 다음 단계에서 이를 채택할 것이며, 다음 장에서 이에 대한 세부 사항에 초점을 맞추겠습니다.

론리-로클리 / functional_angular

StackBlitz ⚡️로 생성

각도-아이비-5zkp66

Edit on StackBlitz ⚡️


View on GitHub