Angular Observable vs Angular Promise: 違い、用途、およびそれらを構築する方法

Angularに関しては、データ管理には主に2つのタイプがあります:ObservablesまたはPromisesを使用し、どちらもJavaScriptで非同期コードを管理できます。一見すると、ObservablesはPromisesのより高度な代替手段と見なされています。しかし、実際には、それらはかなり異なります。別々のAPIを持つことから、異なる動機を持つこと、JavaScriptで非同期モデルを処理するための明確な方法を提供することまで、Angular ObservablesとAngular Promisesは独自の力を持っています。

あなたのAngularプロジェクトに適したものをどのように見極めるのですか?それらについて詳しく説明し、各実装を比較し、機能、利点、欠点を見てみましょう。さらに、Angular Observables とAngular Promises をローコードApp Builderと共に使用する方法を示します 非同期イベントを簡単かつ迅速に処理できるようにします。

Try Ignite UI for Angular

Angularの約束とは何ですか?

​Angularの Promise は、一度に 1 つの値を出力および完了 (解決または拒否) しながら、コールバックを使用する非同期関数を簡単に実行する方法を提供します。Angular Promise を使用すると、API から 1 つのイベントを送信できます。次に、コントローラー (またはディレクティブ) が引き継ぎ、最大 3 つのコールバック (成功、エラー、通知) を登録します。

Angular Promise には 4 つの状態があります。

• fulfilled – アクションが履行されました
• 拒否 – アクションに失敗しました
• pending – アクションはまだ成功していないか、失敗していません
• 解決済み – アクションは履行または拒否されました

覚えておくべきことはAngular Promise は Observable に比べて受動的であり、一度開始するとキャンセルできないということです。つまり、コールバックを Promise コンストラクタ (コントローラーまたはディレクティブ) に渡すと、関数が解決または拒否されます。

さて、Angular Promiseにはいくつかの欠点があります。

• Promise はキャンセルできないため、コールバックがエラーまたは成功を返すまで待つ必要があります。
• エラーは子 Promise に送信されるため、一元化された予測可能なエラー処理には適していません。
• 操作は提供されません。
• Promise は async 値を 1 回だけ実行します。
• 時間の経過とともに複数の値に使用することはできません。
• 大規模なアプリケーションでは、管理が難しくなります。
• 再試行することはできません。

Angularで約束を作成する方法は?

AngularでPromiseを作成するには、「new Promise(function)」構文を使用するだけです。promise コンストラクタは function をパラメータとして取り、その内部関数は resolve と reject をパラメータとして受け取ります。

以下のコードスニペットでこれがどのように見えるかを見てみましょう。

Angular Promise の作成方法がわかったので、それを使用して非常に単純なシナリオを実装します。作成された Promise は、数値が素数であるかどうかを検証するのに役立ちます。

そして最後に、私たちの方法を使用するために、次のようにPromiseを処理します。

Angularで観測可能とは何ですか?

オブザーバブルは、開発者が関数を非同期および同期的に実行できるため、より多くの機能を提供します。これらは、0、1、または複数のイベントを処理できる値のストリームを表し、それぞれに同じAPIを使用します。私が個人的にAngular Observablesで気に入っているのは、retry()、replay()、map、forEach、reduceなど、コーディングを簡素化する演算子の数です。

Angular Promisesと同様に、AngularのObservablesにも欠点があります。

• オブザーバブルは、ブラウザでネイティブにサポートされていません。
• RxJS演算子は、新しく調整された値のストリームを取得する必要があります。
• オブザーバブルを使用したコードのデバッグは、少し難しい場合があります。
• RxJSコードをテストするための追加のツールと手法のノウハウが必要です。

Angularでオブザーバブルを作成する方法は?

AngularでObservableを作成するには、まず、上で学んだように、ネイティブにサポートされていないため、rxjsからObservableをインポートする必要があります。

新しいObservableを作成するには、そのコンストラクタを使用し、サブスクリプション時に実行されるロジックを追加するだけです。この例では、Angularグリッドコンポーネントの優れたデータソースを返すObservableを作成します。

その後、私たちに残されているのは、作成されたObservableをサブスクライブし、受信したデータをデータソースとしてAngularコンポーネントにバインドすることです。

オブザーバブルを操作するユースケースの優れた、より意味のある例は、IgxGridをリモートデータと一緒に使用することです。この例でわかるように、コンポーネントがレンダリングされるときに最初にフェッチされるのはデータの小さなチャンクのみであり、実行される各スクロールまたはデータ操作で新しいデータ部分が取得されます。この any[] 型の観測可能量は、非同期Angularパイプを使用してグリッドに直接バインドされます。非同期パイプは Observable または Promise をサブスクライブし、出力した最新の値を返します。

ここをクリックしてサンプルを表示し、すぐにコードを検査してください。

Angular ObservableとPromiseをApp Builderでどのように使用するか?

上記のことから理解できるように、Observablesを使用する最も一般的なシナリオは、データを何らかのコンポーネントにバインドする必要がある場合です。データを取得するには、HttpClientを使用してHTTPリクエストを行う必要があります。それを行う最善の方法は、別のサービスにそれを実行することです。すべての HttpClient メソッドは、何かの RxJS Observable を返します。一般に、Observable は時間の経過と共に複数の値を返すことができますが、HttpClient からの Observable は常に 1 つの値を出力し、その後完了し、二度と出力することはありません。

App Builderでは、コンポーネントをデータソースにバインドするのは簡単で直感的です。現在、事前定義されたデータソースのいずれかを使用するために、次のオプションから選択できます。

• JSON ファイルをアップロードするか、データを含む JSON ファイルに URL を追加します。
• サーバーのすべてのエンドポイントを記述するSwagger定義ファイルを追加/アップロードします。その後、そこから実際のデータを直接取得できます。

その後、どのアプローチを選択しても、props パネルの Data ドロップダウンを使用して、データをコンポーネント (Angularグリッドなど) にバインドできます。

これで、生成されたコードをAngularで見ることができます。HTTP getメソッドを使用してデータフェッチが実行される別のサービスを提供します。

また、MasterViewComponent tsファイルでは、データサービスが実行したサブスクリプションを確認できます。この基礎により、必要に応じてさらに複雑なシナリオを実行することができます。

Angular Observable vs Promise:違いは何ですか?

Angularの観測可能と約束の違いを示すために、テーブルを作成することにしました。このようにして、より消化しやすく、非常に簡潔な方法でそれらを比較することができます。

 

ANGULAR OBSERVABLES	ANGULAR PROMISES
同期イベントと非同期イベントの両方を処理できます	非同期データリターンのみを処理できます
一定期間にわたって 0、1、または複数の値を生成して完了します (複数のパイプライン内のデータをストリーミングします)	一度に 1 つの値のみを出力する (パイプラインは 1 つ)
受動的でない、つまり	より受動的、意味
map、filter、reduce、retry()、replay()、map、forEachなどの操作を提供します	Do not provide operators
unsubscribe() メソッドを使用してキャンセル可能であり、リスナーはそれ以上の値を受け取らないことを意味します	キャンセルできません
遅延している、つまり、ユーザーがストリームをサブスクライブした後にプロデューサー関数がトリガーされる	熱心である、つまり、Promise コールバックは、その定義の瞬間に .then と .catch なしで、すぐに 1 回だけ実行されます
Subscribers handle errors	Push errors to the child Promises

どうやら、Angular ObservableとPromiseの比較では、Observableが勝っているようです。では、Promise を使用する正当な理由はありますか?そうですよ。

まず、オブザーバブルには一定のコストがかかります。前に述べたように、それらはブラウザでネイティブにサポートされていません。つまり、RxJSライブラリを実装する必要があります。また、非同期またはコールバックベースのコードを作成するのに役立ちますが、バンドルサイズは17.4kbを超える可能性があります。

次に、Angularアプリがデフォルトで非同期の場合、すべての非同期関数とイベントを処理するには、Angular Promise を使用するのが一番です。じゃないですか。

次に、リアクティブスタイルを使用したくない場合、または値のストリームやキャンセル可能なイベントを気にしない場合は、AngularのPromisesを使用してください。

最後に、私たちは最近、フル機能のAngular UIグリッドをゼロから作成する方法を学ぶのに役立つ、非常に詳細で役立つAngular UIデータグリッドのチュートリアルを公開しました。だから、あなたもチェックしたいと思うかもしれません。以下をクリックしてください。