Angular 관찰 가능한 것과 Angular 약속: 차이점, 용도 및 구축 방법
JavaScript에서 비동기 코드를 관리하는 두 가지 주요 방법은 Angular Observable 또는 Angular Promise를 사용하는 것입니다. 그러나 그들과 Observables 및 Promises를 구축하는 방법의 차이점은 무엇입니까? 더 읽어보기.
Angular와 관련하여 데이터 관리에는 두 가지 주요 유형이 있습니다: Observables 또는 Promises를 사용하는 둘 다 JavaScript에서 비동기 코드를 관리할 수 있습니다. 언뜻 보기에 Observables는 Promises에 대한 더 발전된 대안으로 보입니다. 그러나 실제로는 상당히 다릅니다. 별도의 API를 갖는 것부터 다른 동기를 갖는 것, JavaScript에서 비동기 모델을 처리하는 고유한 방법을 제공하는 것까지, Angular Observables와 Angular Promises는 고유한 기능을 가지고 있습니다.
Angular 프로젝트에 어느 것이 적합한지 어떻게 알 수 있습니까? 이에 대해 자세히 논의하고, 각 구현을 비교하고, 기능, 장점 및 단점을 살펴보겠습니다. 이 외에도 비동기 이벤트를 쉽고 빠르게 처리할 수 있도록 로우 코드 App Builder 와 함께 Angular Observables 및 Angular Promises를 사용하는 방법을 시연합니다.
Angular에서 약속이란 무엇입니까?
Angular의 Promises는 한 번에 하나의 값을 내보내고 완료(확인 또는 거부)하는 동안 콜백을 사용하는 비동기 함수를 실행하는 쉬운 방법을 제공합니다. Angular Promise를 사용하는 경우 API에서 단일 이벤트를 내보낼 수 있습니다. 그런 다음 컨트롤러(또는 지시문)가 인계받아 최대 3개의 콜백(success, error 및/또는 notifications)을 등록합니다.
Angular Promise에는 네 가지 상태가 있습니다.
- fulfilled – 작업이 완료되었습니다.
- 거부됨 – 작업 실패
- 보류 중 – 작업이 아직 성공하지 않았거나 실패했습니다.
- SETTLED – 작업이 이행되거나 거부되었습니다.
기억해야 할 점은 Angular Promise는 Observable에 비해 더 수동적이며 한 번 시작되면 취소할 수 없다는 것입니다. 즉, 콜백을 Promise 생성자(컨트롤러 또는 지시문)에 전달하면 함수가 해결되거나 거부됩니다.
이제 Angular Promise에는 몇 가지 단점이 있습니다.
- 약속은 취소할 수 없으며 콜백이 오류 또는 성공을 반환할 때까지 기다려야 합니다.
- 오류가 하위 약속으로 전송되므로 중앙 집중식의 예측 가능한 오류 처리에는 적합하지 않습니다.
- 그들은 어떤 작업도 제공하지 않습니다.
- Promise는 비동기 값을 한 번만 실행합니다.
- 시간이 지남에 따라 여러 값에 사용할 수 없습니다.
- 더 큰 응용 프로그램에서는 관리하기가 어려워집니다.
- 다시 시도할 수 없습니다.
Angular에서 약속을 만드는 방법은 무엇입니까?
Angular에서 약속을 만들려면 'new Promise(function)' 구문을 사용하기만 하면 됩니다. promise 생성자는 function을 매개변수로 사용하고 해당 내부 함수는 resolve 및 reject를 params로 사용합니다.
아래 코드 스니펫에서 어떻게 보이는지 살펴보겠습니다.

이제 Angular Promise를 만드는 방법을 알았으므로 이를 사용하여 매우 간단한 시나리오를 구현하겠습니다. 생성된 Promise는 숫자가 소수인지 여부를 확인하는 데 도움이 됩니다.

마지막으로 우리의 방법을 사용하기 위해 다음과 같은 방식으로 Promise를 처리합니다.

Angular에서 관찰 가능한 것은 무엇입니까?
Observables는 개발자가 함수를 비동기식 및 동기식으로 실행할 수 있도록 하므로 더 많은 기능을 제공합니다. 각각에 대해 동일한 API를 사용하여 0, 1 또는 여러 이벤트를 처리할 수 있는 값 스트림을 나타냅니다. 개인적으로 Angular Observables에 대해 좋아하는 것은 retry(), replay(), map, forEach, reduce 등을 포함하여 코딩을 단순화하는 연산자의 수입니다.
Angular Promises와 마찬가지로 Angular의 Observables에도 단점이 있습니다.
- Observables는 브라우저에서 기본적으로 지원되지 않습니다.
- RxJS 연산자는 새로운 맞춤형 값 스트림을 가져와야 합니다.
- 관찰 가능 개체로 코드를 디버깅하는 것은 조금 더 어려울 수 있습니다.
- RxJS 코드를 테스트하려면 추가 도구와 기술에 대한 노하우가 있어야 합니다.
Angular에서 관찰 가능 항목을 만드는 방법은 무엇입니까?
Angular에서 Observable을 생성하려면 위에서 배웠듯이 기본적으로 지원되지 않기 때문에 먼저 rxjs에서 Observable을 가져와야 합니다.

새로운 Observable을 생성하려면 생성자를 사용하고 구독 시 실행될 logic 를 추가하기만 하면 됩니다. 우리의 경우 Angular 그리드 구성 요소에 대한 훌륭한 데이터 소스를 반환하는 Observable을 만들 것입니다.

그 후에 남은 것은 생성된 Observable을 구독하고 수신된 데이터를 Angular 구성 요소에 데이터 소스로 바인딩하는 것입니다.

관찰 가능 항목 작업을 위한 사용 사례의 훌륭하고 의미 있는 예는 원격 데이터와 함께 IgxGrid를 사용하는 것입니다. 예제에서 볼 수 있듯이 처음에는 구성 요소가 렌더링될 때 작은 데이터 청크만 가져오며 수행되는 각 스크롤 또는 데이터 작업에서 새로운 데이터 조각이 사용됩니다. any[] 유형의 이 observable은 async Angular pipe를 사용하여 그리드에 직접 바인딩됩니다. 비동기 파이프는 Observable 또는 Promise를 구독하고 방출한 최신 값을 반환합니다.

샘플을 보고 코드를 바로 검사 하려면 여기를 클릭하십시오.
App Builder에서 Angular Observable 및 Promise를 사용하는 방법은 무엇입니까?
위에서 알 수 있듯이 Observables를 사용하는 가장 일반적인 시나리오는 데이터를 일부 구성 요소에 바인딩해야 하는 경우입니다. 데이터를 가져오려면 HttpClient를 사용하여 HTTP 요청을 해야 합니다. 이를 수행하는 가장 좋은 방법은 별도의 서비스로 수행하는 것입니다. 모든 HttpClient 메소드는 무언가의 RxJS Observable을 반환합니다. 일반적으로 Observable은 시간이 지남에 따라 여러 값을 반환할 수 있지만 HttpClient의 Observable은 항상 단일 값을 내보낸 다음 완료되어 다시는 방출하지 않습니다.
App Builder 에서는 구성 요소를 데이터 소스에 바인딩하는 것이 쉽고 직관적입니다. 현재 사전 정의된 데이터 소스 중 하나를 사용하기 위해 선택할 수 있는 옵션은 다음과 같습니다.
- JSON 파일을 업로드하거나 데이터가 포함된 JSON 파일에 URL을 추가합니다.
- 서버의 모든 엔드포인트를 설명하는 Swagger 정의 파일을 추가/업로드합니다. 그런 다음 거기에서 실제 데이터를 직접 가져올 수 있습니다.
그 후에는 어떤 접근 방식을 선택하든 props 패널의 Data 드롭다운을 사용하여 데이터를 구성 요소(예: Angular 그리드)에 바인딩할 수 있습니다.
이제 생성된 코드를 볼 수 있습니다 Angular. HTTP get 메소드를 사용하여 데이터 가져오기를 수행하는 별도의 서비스를 제공합니다.
그리고 MasterViewComponent ts 파일에서 데이터 서비스가 수행한 구독을 볼 수 있습니다. 이 기반을 사용하면 필요할 때마다 훨씬 더 복잡한 시나리오를 수행할 수 있습니다.
Angular Observable과 Promise: 차이점은 무엇입니까?
Angular에서 Observables와 Promises의 차이점을 제시하기 위해 테이블을 작성하기로 결정했습니다. 이렇게 하면 더 이해하기 쉽고 매우 간결한 방식으로 비교할 수 있습니다.
ANGULAR OBSERVABLES |
ANGULAR PROMISES |
synchronous 및 asynchronous 이벤트를 모두 처리할 수 있습니다. |
비동기 데이터 반환만 처리할 수 있습니다. |
일정 기간 동안 0, 1 또는 여러 값을 내보내고 완료합니다(여러 파이프라인에서 데이터 스트리밍). |
한 번에 하나의 값만 내보냅니다(하나의 파이프라인이 있음). |
덜 수동적이라는 의미 |
더 수동적이라는 의미 |
map, filter, reduce, retry() 또는 replay(), map, forEach 등과 같은 오퍼 오퍼레이션 |
Do not provide operators |
unsubscribe() 메소드를 사용하여 취소할 수 있는데, 이는 리스너가 더 이상의 값을 수신하지 않음을 의미합니다 |
취소할 수 없습니다. |
게으른 경우, 즉 사용자가 스트림을 구독한 후 producer 함수가 트리거됩니다. |
열망, 즉 Promise 콜백은 .then 및 .catch 없이 정의 순간에 즉시 한 번만 실행됩니다. |
Subscribers handle errors |
Push errors to the child Promises |
분명히 Angular Observable 대 Promise 비교에서 Observable이 승리합니다. 그렇다면 Promise를 사용해야 할 충분한 이유가 있을까요? 절대로.
첫째, Observables는 특정 비용으로 제공됩니다. 앞서 언급했듯이 브라우저에서 기본적으로 지원되지 않습니다. 즉, RxJS 라이브러리를 구현해야 합니다. 비동기 또는 콜백 기반 코드를 만드는 데 도움이 되지만 번들 크기는 17.4kb를 초과할 수 있습니다.
둘째, Angular 앱이 기본적으로 비동기식인 경우 Angular Promise를 사용하는 것보다 모든 비동기 함수와 이벤트를 처리하는 더 좋은 방법은 없습니다. 그렇지 않습니까?
다음으로, 반응 스타일을 사용하고 싶지 않거나 값 스트림 및 취소 가능한 이벤트에 신경 쓰지 않는다면 Angular Promises 로 이동하십시오.
마지막으로, 모든 기능을 갖춘 Angular UI 그리드를 처음부터 만드는 방법을 배우는 데 도움이 되는 매우 상세하고 유용한 Angular UI 데이터 그리드 자습서를 최근에 게시했습니다. 따라서 당신도 확인하고 싶을 것입니다. 아래를 클릭하세요.
