Angular Observable VS. Promise
Angular는 웹 애플리케이션을 구축하기 위한 프레임워크입니다. Angular에는 observables와 promise라는 두 가지 주요 데이터 관리 유형이 있습니다.
Observables 및 Promises 구현을 통해 비동기식 프로그램에 더 쉽게 대처할 수 있으며 별도의 API를 사용하고 약간 다른 동기를 갖습니다.
이 기사에서는 Angular에서 Observable과 Promise가 무엇인지 설명합니다. 또한 Observable과 Promise의 근본적인 차이점을 설명합니다.
Angular에서 Promise란 무엇입니까?
Promise은 비동기 작업을 처리하는 방법을 제공하는 JavaScript 구조입니다. 이는 비동기 작업의 최종 결과를 나타내며 보류, 이행 또는 거부의 세 가지 상태 중 하나일 수 있습니다.
Promise는 또한 일련의 종속 비동기 작업을 나타내기 위해 함께 연결될 수 있습니다.
게다가, Promise는 미래에 단일 값을 생성할 수 있는 객체 유형입니다. 해결된 값이나 해결될 수 없는 이유 또는 보류될 수 있습니다.
여전히 어리둥절하다면 이것을 실제 상황에 적용하십시오. 친구와 약속을 했다면 약속을 이행하거나 거부해야 합니다. 그러나 중간에 갇힌 상태로 약속을 지키려 하지만 이루어지지 않을 때가 있습니다.
마찬가지로 프로그래밍의 약속도 동일한 절차에서 작동할 수 있습니다.
Promise의 단점은 다음과 같습니다.
- 실패한 통화는 재시도할 수 없습니다.
- 애플리케이션이 성장함에 따라 약속을 관리하기가 더 어려워집니다.
- 사용자가 API에 대한 요청을 취소할 수 없습니다.
Angular에서 Observable이란?
Angular에서 관찰 가능 항목은 정확히 무엇입니까? 가장 기본적인 형태의 Promise에 비유할 수 있으며 시간이 지남에 따라 하나의 가치를 갖습니다.
반면 ‘Observable’은 그 이상이다. Angular Observables는 더 나은 성능과 더 쉬운 디버깅과 같은 많은 이점이 있기 때문에 Promises보다 더 강력합니다.
Observable은 스트리밍 작동 방식과 유사하게 시간이 지남에 따라 많은 값을 제공할 수 있으며 오류가 있는 경우 신속하게 종료하거나 재시도할 수 있습니다. Observable은 다양한 방식으로 결합될 수 있으며 누가 첫 번째 것을 사용할 수 있는지 경쟁이 있을 수 있습니다.
RxJS Observables 라이브러리는 강력한 도구입니다. 또한 시간이 지남에 따라 무제한 값을 방출할 수 있는 이벤트 이미터와 같습니다.
드로우 백:
observable의 복잡한 프레임워크를 습득해야 합니다.- 예상치 못한 상황에서
Observables를 사용하는 자신을 발견할 수 있습니다.
Angular에서 Promise와 Observable의 주요 차이점
Promise와 Observable의 차이점에 대해 알아보겠습니다.
Promise |
Observable |
|---|---|
| 약속이 이루어지면 그 가치는 변하지 않습니다. 단일 값을 방출, 거부 및 해결하는 것으로 제한됩니다. | Observable을 사용하여 일정 시간 동안 여러 값을 내보낼 수 있습니다. 한 번에 여러 값을 검색하는 데 도움이 됩니다. |
| 지연 로딩은 약속에 적용되지 않습니다. 따라서 Promise는 생성될 때마다 즉시 적용됩니다. | Observable은 구독될 때까지 실행을 시작하지 않습니다. 이것은 조치가 필요할 때마다 Observables를 편리하게 만듭니다. |
| 오류를 직접 처리하는 대신 Angular Promise는 항상 자식의 약속에 오류를 전달합니다. | 오류 처리는 Angular Observable의 책임입니다. Observable을 활용하면 모든 오류를 한 곳에서 처리할 수 있습니다. |
| 한 번 시작한 약속은 되돌릴 수 없습니다. Promise에 제공된 콜백을 기반으로 Promise가 해결되거나 거부됩니다. | 구독 취소 방법을 사용하면 언제든지 관찰 가능 항목을 취소할 수 있습니다. |
Angular의 Promise 및 Observable 예제
Promise와 Observable의 개념을 자세히 이해하는 데 도움이 되는 예를 살펴보겠습니다.
타이프스크립트 코드:
import { Component } from '@angular/core';
import { Observable, Observer, } from "rxjs";
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
promiseTemp: Promise<boolean>;
createPromise() {
this.promiseTemp = this.testPromise(0);
}
observableTemp: Observable<boolean>;
createObservable() {
this.observableTemp = this.testObservable(0);
}
subscribeObservable() {
this.observableTemp
.subscribe(
result => {
console.log(`Observable Ok: ${result}`);
},
err => {
console.error(err);
});
}
observableNextTemp: Observable<boolean>;
createObservableNext() {
this.observableNextTemp = this.testObservableNext(0);
}
promiseTemp2: Promise<boolean>;
createToPromiseByObservable() {
this.promiseTemp2 = this.testObservable(0).toPromise();
}
observableForkJoinTemp: Observable<boolean[]>;
countForkJoin = 2;
testObservable(value: number): Observable<boolean> {
console.log("create Observable");
return Observable.create((observer: Observer<boolean>) => {
console.log("execute Observable");
this.testPromise2(value)
.then(result => {
observer.next(result);
observer.complete();
})
.catch(err => {
observer.error(err);
observer.complete();
});
});
}
testObservableNext(value: number): Observable<boolean> {
console.log("create Observable Next");
return Observable.create((observer: Observer<boolean>) => {
console.log("execute Observable Next");
this.testPromise2(value)
.then(result => {
observer.next(result);
setTimeout(() => {
observer.next(result);
observer.complete();
}, 5000);
})
.catch(err => {
observer.error(err)
});
});
}
testPromise(value: number): Promise<boolean> {
console.log("creation");
return new Promise((resolve, reject) => {
console.log("execution");
this.testPromise2(value)
.then(result => {
resolve(result);
})
.catch(reject);
});
}
testPromise2(value: number): Promise<boolean> {
return new Promise((resolve, reject) => {
if (value > 1) {
reject(new Error("testing"));
} else {
resolve(true);
}
});
}
}
HTML 코드:
<h2>Example of Promise and Observable </h2>
<br/>
<button (click)="createPromise()">Create Promise</button>
<br/>
<br/>
<button (click)="createObservable()">Create Observable</button>
<br/>
<br/>
<button (click)="subscribeObservable()">Subscribe Observable</button>
<br/>
<br/>
<button (click)="createObservableNext()">Create Observable Next</button>
<br/>
<br/>
<button (click)="createToPromiseByObservable()">Create Promise by Observable</button>
<br/>
Promise와 Observable 중 어느 것이 사용하기 쉬운가요? 그래서 여기에 이 질문에 대한 간단한 대답이 있습니다.
Promise는 Angular에서 비동기 작업을 해결하는 데 사용되며 Observable은 데이터가 API와 같은 외부 소스에서 올 때 사용됩니다.
Promise는 단일 값 또는 값 배열로 해결할 수 있으며 Observable은 시간이 지남에 따라 하나 이상의 값을 내보냅니다.
따라서 HTTP 검색을 관리하는 동안 Promise는 동일한 요청에 대한 단일 응답만 처리할 수 있습니다. 그러나 동일한 요청에 대한 결과가 많으면 Observable을 사용해야 합니다.
코드의 라이브 데모를 확인하려면 여기를 클릭하십시오.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook