Angular Observable VS. Promise
Angular は、Web アプリケーションを構築するためのフレームワークです。Angular には、主に 2つのタイプのデータ管理があります。observables と promises です。
Observables と Promises の実装により、非同期プログラムへの対応が容易になり、別々の API を使用し、動機がわずかに異なります。
この記事では、Angular で Observable と Promise とは何かについて説明します。さらに、Observable と Promise の根本的な違いについて説明します。
Angular の Promise とは
Promises は、非同期操作を処理する方法を提供する JavaScript 構造です。これらは非同期操作の最終的な結果を表し、保留中、実行済み、または拒否の 3つの状態のいずれかになります。
Promise をチェーン化して、一連の依存する非同期操作を表すこともできます。
さらに、Promise は、解決された値または解決できない理由、あるいは保留中のいずれかの単一の値を将来生成できるタイプのオブジェクトです。
それでも困っている場合は、これを実際の状況に適用してください。友達に約束をする場合は、約束を果たすか拒否する必要があります。それでも、あなたが真ん中に閉じ込められて、約束を果たそうと試みたが、そうしなかった時があります。
同様に、プログラミングの Promise も同じ手順で機能します。
Promise の欠点は次のとおりです。
- 失敗した呼び出しを再試行できませんでした。
- アプリケーションが大きくなるにつれて、約束の管理はより困難になります。
- ユーザーは API へのリクエストをキャンセルできませんでした。
Angular で観察可能とは
Angular で観察できるものは正確には何ですか？最も基本的な形式の Promise と比較することができ、時間の経過とともに単一の値を持ちます。
一方、Observables はそれよりもかなり多いです。Angular の Observables は、パフォーマンスの向上やデバッグの容易さなど、多くの利点があるため、Promises よりも強力です。
Observable は、ストリーミングの動作と同様に、時間の経過とともに多くの値を提供でき、エラーが発生した場合はすぐに終了または再試行できます。オブザーバブルはさまざまな方法で結合できます。または、誰が最初のオブザーバブルを使用できるかを確認するための競争が発生する可能性があります。
RxJSObservables ライブラリは強力なツールです。さらに、それらは時間の経過とともに無制限の値を放出できるイベントエミッターのようなものです。
欠点：
observableの複雑なフレームワークを取得する必要があります。- 予期しない状況で
Observablesを使用していることに気付く場合があります。
Promise と Angular での Observable の主な違い
Promise と Observable の違いについて説明しましょう。
Promise |
Observable |
|---|---|
| 約束が果たされると、その価値は変わりません。それらは、単一の値を発行、拒否、および解決することに限定されています。 | オブザーバブルを使用して、一定期間にわたって複数の値を発行できます。一度に複数の値を取得するのに役立ちます。 |
| 遅延読み込みは promise には適用されません。したがって、Promise は、形成されるたびにすぐに適用されます。 | オブザーバブルは、サブスクライブされるまで実行を開始しません。これにより、アクションが必要な場合はいつでも Observables が便利になります。 |
| エラーを直接処理する代わりに、AngularPromises は常にエラーを子の Promise に渡します。 | エラー処理は AngularObservables の責任です。Observables を利用すると、すべてのエラーを 1 か所で処理できます。 |
| 一度始めたら、約束を取り消すことはできません。Promise に提供されたコールバックに基づいて、Promise は解決または拒否されます。 | unsubscribe メソッドを使用すると、いつでもオブザーバブルをキャンセルできます。 |
Angular での Promise と Observable の例
約束の概念を理解し、詳細に観察できるようにするのに役立つ例について説明しましょう。
Typescript コード：
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 は Angular で非同期操作を解決するために使用され、Observables はデータが API などの外部ソースからのものである場合に使用されます。
Promise は単一の値または値の配列で解決でき、Observables は時間の経過とともに 1つ以上の値を発行します。
したがって、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