PromisesとObservablesの違いは何ですか?

1498
Rohit 2016-05-22 05:43.

AngularPromiseObservableAngularの違いは何ですか?

それぞれの例は、両方のケースを理解するのに役立ちます。どのようなシナリオでそれぞれのケースを使用できますか?

28 answers

1658
Günter Zöchbauer 2016-05-22 07:19.

約束する

APromiseは、非同期操作が完了または失敗したときに単一のイベントを処理します。

注:Promiseキャンセルをサポートするライブラリはありますが、ES6Promiseは今のところサポートしていません。

観察可能

AnObservableStream(多くの言語で)のようなものであり、イベントごとにコールバックが呼び出される0個以上のイベントを渡すことができます。

多くの場合、などの機能を提供するため、よりObservableも好まれます。ではあなたは0、1、または複数のイベントを処理する場合、それは問題ではありません。いずれの場合も同じAPIを利用できます。PromisePromiseObservable

Observableまた、キャンセルPromise可能であるという利点もあります。サーバーへのHTTPリクエストまたはその他の高価な非同期操作の結果が不要になった場合、のはサブスクリプションをキャンセルできますが、通知が不要な場合でも、最終的には成功または失敗したコールバックを呼び出します。またはそれが提供する結果。SubscriptionObservablePromise

一方でPromiseすぐに開始、Observableあなたがそれに加入している場合にのみ起動します。これが、Observablesがレイジーと呼ばれる理由です。

観測可能では提供事業者のようなmapforEachreduce配列に類似し、...

強力なような事業者もありretry()、またはreplay()多くの場合、非常に便利です...。 rxjsに同梱されているオペレーターのリスト

レイジー実行では、サブスクライブによってオブザーバブルが実行される前に演算子のチェーンを構築して、より宣言的な種類のプログラミングを実行できます。

355
trungk18 2016-10-20 05:17.

両方ともPromises、アプリケーションの非同期性にObservables対処するのに役立つ抽象化を提供します。それらの違いは、@Günterと@Reluによって明確に指摘されました。

コードスニペットは1000語の価値があるので、以下の例を見て理解しやすくしてください。

素晴らしい記事をありがとう@ChristophBurgdorf


Angularは、HTTPを処理するためのpromiseの代わりにRx.jsObservablesを使用します。

入力するとすぐに結果が表示される検索機能を構築しているとします。おなじみのように聞こえますが、そのタスクには多くの課題が伴います。

  • ユーザーがキーを押すたびにサーバーエンドポイントにアクセスする必要はありません。サーバーエンドポイントに大量のHTTPリクエストが殺到するはずです。基本的に、すべてのキーストロークではなく、ユーザーが入力を停止したときにのみヒットしたいと考えています。
  • 後続のリクエストで同じクエリパラメータ使用して検索エンドポイントにアクセスしないでください。
  • 順不同の応答に対処します。同時に複数のリクエストが処理されている場合、予期しない順序でリクエストが返される場合を考慮する必要があります。最初にコンピューターを入力し、停止し、リクエストが送信され、を入力し、停止し、リクエストが送信されたと想像してください。現在、2つのリクエストが処理中です。残念ながら、コンピュータの結果を運ぶリクエストは、の結果を運ぶリクエストの後に戻ってきます。

デモは、単純に2つのファイルで構成されます:app.tswikipedia-service.ts。ただし、実際のシナリオでは、物事をさらに分割する可能性があります。


以下は、説明されているエッジケースのいずれも処理しないPromiseベースの実装です。

wikipedia-service.ts

import { Injectable } from '@angular/core';
import { URLSearchParams, Jsonp } from '@angular/http';

@Injectable()
export class WikipediaService {
  constructor(private jsonp: Jsonp) {}

  search (term: string) {
    var search = new URLSearchParams()
    search.set('action', 'opensearch');
    search.set('search', term);
    search.set('format', 'json');
    return this.jsonp
                .get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search })
                .toPromise()
                .then((response) => response.json()[1]);
  }
}

特定の検索用語を使用してウィキペディアAPIに対してリクエストJsonpを行うサービスを注入しています。我々は呼んでいることに注意してくださいから得るためにします。最終的には、検索メソッドの戻り値の型としてaになります。GETtoPromiseObservable<Response>Promise<Response>Promise<Array<string>>

app.ts

// check the plnkr for the full list of imports
import {...} from '...';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Wikipedia Search</h2>
      <input #term type="text" (keyup)="search(term.value)">
      <ul>
        <li *ngFor="let item of items">{{item}}</li>
      </ul>
    </div>
  `
})
export class AppComponent {
  items: Array<string>;

  constructor(private wikipediaService: WikipediaService) {}

  search(term) {
    this.wikipediaService.search(term)
                         .then(items => this.items = items);
  }
}

ここでもそれほど驚くことではありません。を注入WikipediaServiceし、検索メソッドを介してその機能をテンプレートに公開します。テンプレートは単にkeyupにバインドし、を呼び出しますsearch(term.value)

WikipediaServiceの検索メソッドが返すPromiseの結果をアンラップし、それを文字列の単純な配列としてテンプレートに公開して、*ngForループしてリストを作成できるようにします。

PlunkerでのPromiseベースの実装の例を参照してください


オブザーバブルが本当に輝く場所

キーストロークごとにエンドポイントをハンマーで叩くのではなく、ユーザーが400ミリ秒間入力を停止したときにのみリクエストを送信するようにコードを変更しましょう

このような超能力を明らかにするには、最初にObservable<string>、ユーザーが入力する検索用語を含むを取得する必要があります。keyupイベントに手動でバインドする代わりに、AngularのformControlディレクティブを利用できます。このディレクティブを使用するには、最初にをReactiveFormsModuleアプリケーションモジュールにインポートする必要があります。

app.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JsonpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [BrowserModule, JsonpModule, ReactiveFormsModule]
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

インポートしたら、テンプレート内からformControlを使用して、「term」という名前に設定できます。

<input type="text" [formControl]="term"/>

コンポーネントでは、FormControlfromのインスタンスを作成@angular/formし、コンポーネントの名前用語の下のフィールドとして公開します。

舞台裏では、termはサブスクライブできるObservable<string>asプロパティvalueChangesを自動的に公開します。今、私たちは持っていることをObservable<string>、ユーザの入力を克服して呼び出すように簡単ですdebounceTime(400)私たちにObservable。これによりObservable<string>、400ミリ秒の間新しい値が来ていない場合にのみ、新しい値を出力する新しい値が返されます。

export class App {
  items: Array<string>;
  term = new FormControl();
  constructor(private wikipediaService: WikipediaService) {
    this.term.valueChanges
              .debounceTime(400)        // wait for 400ms pause in events
              .distinctUntilChanged()   // ignore if next search term is same as previous
              .subscribe(term => this.wikipediaService.search(term).then(items => this.items = items));
  }
}

私たちのアプリがすでに結果を表示している検索用語の別のリクエストを送信することは、リソースの無駄になります。目的の動作を実現するために必要なのは、呼び出したdistinctUntilChanged直後にオペレーターを呼び出すことだけです。debounceTime(400)

PlunkerでのObservable実装の例を参照してください

順不同の応答に対処するには、記事全体を確認してください http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

AngularでHttpを使用している限り、通常のユースケースではObservable overPromiseを使用しても大きな違いはないことに同意します。ここでは、実際にはどの利点も実際には関係ありません。将来、いくつかの高度なユースケースが見られることを願っています:)


もっと詳しく知る

257
Alireza 2017-05-07 20:56.

PromisesObservablesはどちらも、JavaScriptの非同期機能を操作するのに役立ちます。多くの場合、これらは非常に似ていますが、2つの間にはまだいくつかの違いがあり、promiseはhttp呼び出しのasynchronousような方法で解決される値です。一方、オブザーバブルは一連の非同期イベントを処理します。それらの主な違いを以下に示します。

約束する:

  • パイプラインが1つある
  • 通常、非同期データリターンでのみ使用します
  • キャンセルするのは簡単ではありません

観察可能:

  • キャンセル可能です
  • 再試行や再試行などの性質上、再試行可能です。
  • 複数のパイプラインでデータをストリーミング
  • マップ、フィルターなどの配列のような操作を行う
  • イベントなどの他のソースから作成できます
  • それらは関数であり、後でサブスクライブすることができます

また、違いを視覚的に示すために、以下のグラフィックイメージを作成しました。

80
Aravind 2017-01-10 08:29.

約束

  1. 定義:関数を非同期で実行し、それらの戻り値(または例外)を使用するのに役立ちますが、実行時に1回だけです。
  2. 怠け者ではない
  3. キャンセルできません(キャンセルをサポートするPromiseライブラリがありますが、ES6 Promiseはこれまでサポートしていません)。2つの可能な決定は
    • 拒否する
    • 解決する
  4. 再試行できません(Promiseは、再試行機能を持つPromiseを返した元の関数にアクセスできる必要があります。これは悪い習慣です)

オブザーバブル

  1. 定義:関数を非同期で実行し、実行時にそれらの戻り値を連続したシーケンス(複数回)で使用するのに役立ちます。
  2. デフォルトでは、時間の経過とともに値を出力するため、レイジーです。
  3. コーディング作業を簡素化する多くの演算子があります。
  4. 1つのオペレーターの再試行を使用して、必要なときにいつでも再試行できます。また、いくつかの条件に基づいてオブザーバブルを再試行する必要がある場合も、retryWhenを使用できます。

    :オペレーターのリストとそのインタラクティブな図は、RxMarbles.comで入手できます

78
besserwisser 2017-06-29 10:45.

回答に欠けているObservablesの1つの欠点があります。Promiseは、ES7 async / await機能の使用を許可します。それらを使用すると、同期関数呼び出しのように非同期コードを記述できるため、コールバックは不要になります。Observablesがこれを行う唯一の可能性は、それらをPromisesに変換することです。ただし、それらをPromisesに変換すると、戻り値は1つだけになります。

async function getData(){
    const data = await observable.first().toPromise();
    //do stuff with 'data' (no callback function needed)
}

さらに読む:Rx Observableで「待つ」にはどうすればよいですか?

42
sudheer nunna 2018-01-18 06:50.

PromisesとObservablesはどちらも非同期呼び出しのみを処理します。

それらの違いは次のとおりです。

観察可能

  1. 一定期間に複数の値を出力します
  2. Observableをサブスクライブするまで呼び出されません
  3. unsubscribe()メソッドを使用してキャンセルできます
  4. map、forEach、filter、reduce、retry、retryWhen演算子を提供します

約束する

  1. 一度に1つの値のみを出力します

  2. .thenおよび.catchなしでサービスを呼び出します

  3. キャンセルできません

  4. 演算子を提供しません

29
Sajeetharan 2017-10-08 17:43.

この答えは遅れていますが、私は以下の違いを要約しました、

観察可能:

  1. 観察可能なだけされfunctionとるan observerと返します function Observer: an object with next, error.
  2. 観察者に可能にするsubscribe/unsubscribe、そのデータストリームに、観察者に次の値を発し、notify約オブザーバerrors約観察者に知らせますstream completion
  3. オブザーバーはfunction to handle next value、エラーとストリームの終了(UIイベント、http応答、Webソケット付きデータ)を提供します。
  4. multiple values時間の経過とともに機能します
  5. それはcancel-able/retry-able、そのよう支援事業者をmap,filter,reduceなど
  6. Observableの作成は次のようになりObservable.create()ます---メソッドを呼び出すことができるObservableを返しますObserver Observable.from()-配列またはiterableをにObservable Observable.fromEvent()変換します-イベントをObservableにObservable.fromPromise()変換します--PromiseをObservableに変換しObservable.range()ます---指定された範囲の整数のシーケンスを返します

約束

  1. 約束は、将来終了するタスクを表します。

  2. 約束はなりresolved by a valueます;

  3. 約束は例外によって拒否されます。

  4. そうcancellableではなく、それは戻りますa single value

  5. 約束は機能を公開します (then)

    -次に、新しいpromise;を返します 。

    -にattachment基づいて実行されることを許可し stateます。

    -handlersある guaranteed中で実行しますorder attached

24
Marc Pérez 2017-05-13 03:33.

他のすべての答えはあなたの疑問を解決するはずだと私は信じています。それでも、オブザーバブルは関数型プログラミングに基づいていることを付け加えたかったのですが、map、flatmap、reduce、zipなどの関数が非常に便利だと思います。特にAPIリクエストに依存する場合にWebが達成する一貫性は、残酷な改善です。

このドキュメントはreactiveXの公式ドキュメントであり、最も明確であることがわかっているため、このドキュメントを強くお勧めします

オブザーバブルに興味がある場合は、次の3部構成の投稿をお勧めします:http//blog.danlew.net/2014/09/15/grokking-rxjava-part-1/

これはRxJavaを対象としていますが、概念は同じであり、非常によく説明されています。reactXのドキュメントには、各関数の同等性があります。RxJSを探す必要があります。

23
Stephen R. Smith 2017-04-12 19:25.

Promisesが最善の解決策であるという問題に対処したばかりであり、この質問が役立つ場合に遭遇した人のために、ここで共有しています(これはまさに以前に探していた答えでした):

Angular2プロジェクトには、いくつかのパラメーターを受け取り、フォームのドロップダウンメニューに入力する値リストを返すサービスがあります。フォームコンポーネントが初期化されるとき、異なるパラメーターを使用して同じサービスを複数回呼び出して、いくつかの異なるドロップダウンメニューを定義する必要がありますが、サービスを呼び出すためにすべての変数をキューに入れるだけでは、最後の変数のみが成功し、残りのエラーが発生しますでる。データベースからフェッチするサービスは、一度に1つのリクエストしか処理できませんでした。

すべてのドロップダウンメニュー変数を正常に設定する唯一の方法は、最後のリクエストが終了するまで新しいリクエストが処理されないようにサービスを呼び出すことでした。Promise/ .thenメカニズムは問題をうまく解決しました。

  fetchValueList(listCode): Promise<any> {
      return this.dataSvc.getValueList(listCode, this.stateSvc.currentContext, this.stateSvc.currentLanguageCode)
          .map(response => response.json())
          .toPromise();
  }

  initializeDropDowns() {
      this.fetchValueList('First-Val-List')
          .then(data => {
              this.firstValList = data;
              return this.fetchValueList('Second-Val-List')
          }).then(data => {
              this.secondValList = data;
              return this.fetchValueList('Third-Val-List')
          }).then(data => {
              this.thirdValList = data;
          })  }

コンポーネントで関数を定義してから、ngOnInitでinitializeDropDowns()を呼び出しました。

fetchValueList関数はPromiseを返すため、最初の呼び出しで最初のlistCodeが渡され、Promiseが解決されると、戻り値は.thenブロックのデータ変数にあり、this.firstValList変数に割り当てることができます。関数がデータを返したので、サービスが終了したことがわかり、2番目のlistCodeを使用して再度安全に呼び出すことができます。戻り値は、次の.thenブロックのデータ変数にあり、this.secondValList変数に割り当てます。

これを必要な回数チェーンしてすべての変数を設定できます。最後のコードブロックでは、returnステートメントを省略するだけで、ブロックが終了します。

これは非常に特殊なユースケースであり、コンポーネントの初期化時に複数回呼び出す必要がある単一のサービスがあり、サービスはフェッチを完了して値を返す必要がありますが、この場合は、 Promise /.thenメソッドが理想的でした。

21
Iosua Sipos 2017-10-03 23:38.

約束する:

  • 単一の将来価値を提供します。
  • 怠惰ではありません。
  • キャンセルできません。

観察可能:

  • 時間の経過とともに複数の値を出力します。
  • 怠惰;
  • キャンセル可能;
  • map、filter、reduceなどの演算子をサポートします

必要に応じて、AngularでHTTPを呼び出すときに、observableの代わりにpromiseを使用できます。

21
Willem van der Veen 2018-08-12 00:02.

概要:

  • PromisesとObservablesはどちらも、非同期操作の処理に役立ちます。これらの非同期操作が実行されると、特定のコールバックを呼び出すことができます。
  • Promiseは1つのイベントのみを処理でき、Observablesは時間の経過に伴うイベントのストリーム用です
  • 保留中のプロミスはキャンセルできません
  • Observablesが放出するデータは、演算子を使用して変換できます

オブザーバブルにはpromiseが提供するすべての機能(+追加)があるため、非同期動作を処理するためにいつでもオブザーバブルを使用できます。ただし、Observablesが提供するこの追加機能が必要ない場合もあります。その場合、ライブラリをインポートして使用するために余分なオーバーヘッドが発生します。

Promisesを使用する場合:

結果を処理する単一の非同期操作がある場合は、promiseを使用します 。例えば:

var promise = new Promise((resolve, reject) => {
  // do something once, possibly async
  // code inside the Promise constructor callback is getting executed synchronously

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

//after the promise is resolved or rejected we can call .then or .catch method on it

promise.then((val) => console.log(val))      // logs the resolve argument
       .catch((val) => console.log(val));    // logs the reject argument

したがって、promiseは、解決または拒否するコードを実行します。解決または拒否のいずれかが呼び出されると、プロミスは保留状態から解決済みまたは拒否された状態になります。promise状態が解決されると、then()メソッドが呼び出されます。promise状態が拒否されると、catch()メソッドが呼び出されます。

Observablesを使用する場合:

処理する必要のある(データの)ストリームがある場合は、Observablesを使用します。ストリームは、時間の経過とともに利用可能になる一連のデータ要素です。ストリームの例は次のとおりです。

  1. クリックイベントやキーアップイベントなどのユーザーイベント。ユーザーは時間の経過とともにイベント(データ)を生成します。
  2. Websocketは、クライアントがサーバーにWebSocket接続を確立した後、時間の経過とともにデータをプッシュします。

Observable自体では、次のイベントが発生したとき、エラーが発生したとき、またはObservableが完了したときに指定されます。次に、このobservableをサブスクライブしてアクティブにし、このサブスクリプションでは、3つのコールバックを渡すことができます(必ずしもすべてを渡す必要はありません)。成功のために実行される1つのコールバック、エラーのための1つのコールバック、および完了のための1つのコールバック。例えば:

const observable = Rx.Observable.create(observer => {
  // create a single value and complete
  observer.onNext(1);
  observer.onCompleted();
});

source.subscribe(
  x => console.log('onNext: %s', x),   //  success callback
  e => console.log('onError: %s', e),  //  error callback
  () => console.log('onCompleted')     //  completion callback
 );

// first we log: onNext: 1
//  then we log: onCompleted

オブザーバブルを作成するときは、引数としてオブザーバーを提供するコールバック関数が必要です。この観測では、あなたがして呼び出すことができますonNextonCompletedonError。次に、Observableがサブスクライブされると、サブスクリプションに渡された対応するコールバックが呼び出されます。

12
Gajender Singh 2018-04-11 21:36.

約束-単一の将来価値を提供します。怠惰ではありません。キャンセル不可。拒否または解決します。

観察可能-複数の将来価値を提供します。怠惰。キャンセル可能。それは他のメソッドライブマップ、フィルター、リデュースを提供します。

10
ramesh sharma 2019-06-24 02:08.

最初に約束と観察可能な類似性

  1. どちらも非同期コードの処理に使用されます。
  2. 約束の例を探してください。Promiseコンストラクターは、非同期タスクの完了時に何らかの値で呼び出されたときに呼び出される解決参照関数を渡します。

const promise = new Promise(resolve => {
  setTimeout(() => {
    resolve("Hello from a Promise!");
  }, 2000);
});

promise.then(value => console.log(value));

  1. 今観察可能な例。ここでも、非同期タスクを処理するオブザーバーであるobservableに関数を渡します。promiseのresolveとは異なり、次の方法があり、その代わりにサブスクライブします。

  2. したがって、両方が非同期タスクを処理します。それでは違いを見てみましょう。


const observable = new Observable(observer => {
  setTimeout(() => {
    observer.next('Hello from a Observable!');
  }, 2000);
});

observable.subscribe(value => console.log(value));

約束と観察可能な違い

約束する

  1. 単一の値を解決または拒否し、一度に単一の値の非同期タスクを処理できます。
  2. Promiseは、完了した非同期値を解決すると、使用できなくなります。1回限りの使用であり、ここでは不十分です。
  3. キャンセル不可
  4. 演算子のrxjsサポートはありません。

観察可能

  1. 複数の非同期値を発行する機能。
  2. イベントまたは値のストリームを処理するために使用されます。多数のタスクまたは値の配列があり、値がこれに挿入されるたびに自動的に処理される必要があるとします。この配列に値をプッシュすると、そのすべてのサブスクライバーが自動的に最新の値を受け取ります。
  3. Observableは、入力の変更、繰り返しの間隔、すべての子コンポーネントへのブロードキャスト値、Webソケットプッシュ通知などを監視するのに役立ちます。
  4. 退会方法でいつでもキャンセルできます。
  5. 約束するもう1つの最後の良い部分は、rxjs演算子のサポートです。サブスクライブする前に観測可能なデータを変換するために、主にmap、filter、switchMap、combineLatestなどの多くのパイプ演算子があります。


10
Yogesh Waghmare 2019-12-30 21:32.

Promiseは単一の値を発行し、Observableは複数の値を発行します。したがって、HTTPリクエストを処理している間、Promiseは同じリクエストに対する単一のレスポンスを管理できますが、同じリクエストに対する複数のレスポンスがある場合は、Observableを使用する必要があります。はい、Observableは同じリクエストに対して複数の応答を処理できます。

約束する

const promise = new Promise((data) =>
{ data(1);
  data(2);
  data(3); })
.then(element => console.log(‘Promise ‘ + element));

出力

Promise 1

観察可能

const observable = new Observable((data) => {
data.next(1);
data.next(2);
data.next(3);
}).subscribe(element => console.log('Observable ' + element));

出力

Observable 1
Observable 2
Observable 3
8
DeC 2019-10-29 02:04.

Promiseは、非同期アクティビティが終了または失敗したときに単一のイベントを発行します。

Observableは(多くの言語で)ストリームのようなものであり、すべてのイベントにコールバックが必要な場合に、少なくとも0個以上のイベントを渡すことができます。

Promiseなどのハイライトを提供するため、Promiseよりも頻繁にObservableが優先されます。Observableでは、0、1、またはさまざまなイベントを処理する必要があるかどうかは関係ありません。ケースごとに同様のAPIを使用できます。

Promise:Promise は単一の値を出力します

例えば:

const numberPromise = new Promise((resolve) => {
    resolve(5);
    resolve(10);
});

numberPromise.then(value => console.log(value));
// still prints only 5

観察可能: 一定期間にわたって複数の値を放出します

例えば:

  const numberObservable = new Observable((observer) => {
        observer.next(5);
        observer.next(10);
    });

numberObservable.subscribe(value => console.log(value));
// prints 5 and 10

オブザーバブルは、一定期間に複数の値を放出するストリームのように考えることができ、放出されたアイテムごとに同じコールバック関数が呼び出されるため、オブザーバブルでは同じAPIを使用して非同期データを処理できます。そのデータが一定の期間にわたって単一の値として送信されるか、複数の値として送信されるか。

約束する:

  • 約束は怠惰ではありません
  • プロミスはキャンセルできません

観察可能:

  • 観察可能なのは怠惰です。「観測量」は遅いです。購読するまで呼び出されません。
  • unsubscribe()メソッドを使用してObservableをキャンセルできます
  • 追加のObservableは、map、foreach、filter、reduce、retry、retryWhenなどの多くの強力な演算子を提供します。

AngularPromisesとObservables

7
Srikrushna 2019-04-30 01:05.

PromisesとObservablesはどちらも、非同期操作の処理に役立ちます。これらの非同期操作が実行されると、特定のコールバックを呼び出すことができます。

Angularは、HTTPを処理するための約束の代わりに、RxJSからのObservablesを使用します

Below are some important differences in promises & Observables.

4
Amr Ibrahim 2018-10-01 01:57.

短い答え :

Observableの優れており、すべてのPromises機能に加えて追加機能があります。


長い答え:

約束:

  • 1回限り「データを1回返す」を使用
  • キャンセルなし
  • 1人のリスナー
  • ソケットサポートなし1つのリスナー

観察可能:

  • データの変更に応じて何度もデータを返す
  • サポートキャンセル
  • サポートソケット
  • 多くのリスナーをサポートし、データが変更されたときに通知します
  • マップ、フィルター、削減をサポート
4
Bikram 2018-10-31 11:56.

以下は、promiseとObservablesのいくつかの重要な違いです。

約束する

  • 単一の値のみを出力します
  • キャンセル不可
  • 共有できません
  • 常に非同期

観察可能

  • 複数の値を出力します
  • 呼び出されたとき、または誰かがサブスクライブしているときにのみ実行されます
  • キャンセル可能
  • 複数のサブスクライバーがその共有価値を共有およびサブスクライブできます。そして、すべてのサブスクライバーは単一の時点で実行されます。
  • おそらく非同期

理解を深めるには、https://stackblitz.com/edit/observable-vs-promisesを参照してください。

4
shusson 2018-11-15 03:36.

受け入れられた答えは一般的には良いですが、Angularコンポーネントを扱うときは、キャンセルをサポートしているため、ほとんどの場合Observableを使用したいと思うことを強調しているとは思いません。Promiseはキャンセルできず、コンポーネントが破壊されても解決されます。Angularは、寛容になるまで寛容になる傾向があります。

たとえば、破壊されたコンポーネントを手動で変更検出すると、例外が発生します。

ngOnInit() {
  // promise api
  this.service.getData().then(d => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });

  // observable api
  this.service.getData().pipe(takeUntil(this.unsubscribe)).subscribe((d) => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });
}

promiseが解決される前にコンポーネントが破棄されたattempt to use destroyed view場合、promiseが解決されたときにエラーが発生します。

または、Angular / RxJs`Subscription`の購読をいつ解除する必要がありますかパターンでobservableを使用する場合、コンポーネントが破棄されるとすぐにサブスクリプションがキャンセルされます。

これは少し不自然な例ですが、破壊されたコンポーネントのコードを実行すると、おそらくバグが発生します。あなたが実際に何らかの理由でそれをしたいのでなければ:p

4
Mohideen bin Mohammed 2019-03-08 20:04.

約束する:

非同期イベントハンドラー-Promiseオブジェクトは、非同期操作の最終的な完了(または失敗)とその結果の値を表します。

構文: new Promise(executor);

例えば:

var promise_eg = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise_eg.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

console.log(promise_eg);

Promiseについて: パイプラインが1つあるため、呼び出されたときに1回だけ値を返します。その一方向ハンドラーなので、一度呼び出されるとキャンセルできない場合があります。when()およびthen()で遊ぶことができる便利な構文

オブザーバブル:

オブザーバブルは、時間の経過に伴う複数の値の怠惰なコレクションです。非同期操作のための本当に素晴らしいアプローチです。クロスプラットフォームをサポートするrxjsで実行でき、angular / reactなどで使用できます。

ストリームライナーのように機能します。マルチパイプラインにすることができます。したがって、一度定義すると、多くの場所で結果を返すようにサブスクライブできます。

構文: import * as Rx from "@reactivex/rxjs"; 初期化する:

Rx.Observable.fromEvent(button, "click"),
Rx.Subject()

購読するには: RxLogger.getInstance();

例えば:

import { range } from 'rxjs';
import { map, filter } from 'rxjs/operators';

range(1, 200).pipe(
  filter(x => x % 2 === 1),
  map(x => x + x)
).subscribe(x => console.log(x));

マルチパイプラインをサポートしているため、異なる場所で結果をサブスクライブできるため、 約束よりも多くの可能性があります。

使用法: それはのようなより多くの可能性を持っていますmap, filter, pipe, map, concatMap etc

3
rpgFANATIC 2019-02-14 12:45.

チュートリアルとドキュメントを最初に読んだとき、私が遭遇したことは明らかではありませんでしたが、マルチキャストのアイデアでした。

デフォルトでは、複数のサブスクリプションがObservableで複数の実行をトリガーすることに注意してください。単一のHTTP呼び出しへの複数のサブスクリプションObservableは、.share()(マルチキャストを有効にしない限り)複数の同一のHTTP呼び出しをトリガーします。

promiseは、一度に1つのことを処理し、そのデータをアンラップし、例外を処理し、async / awaitなどのクールなものを言語サポートし、それ以外の場合はかなり必要最低限​​のものです。

Observableにはたくさんのベルやホイッスルがありますが、使用しているパワーを理解する必要があります。そうしないと、誤用される可能性があります。

3
Batiste Bieler 2019-03-26 05:01.

Observableは「キャンセル可能」であるという議論を使用している人はたくさんいますが、Promiseを「キャンセル可能」にするのは簡単です。

function cancellablePromise(body) {
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    resolve = res; reject = rej;
    body(resolve, reject)
  })
  promise.resolve = resolve;
  promise.reject = reject;
  return promise
}

// Example 1: Reject a promise prematurely
const p1 = cancellablePromise((resolve, reject) => {
  setTimeout(() => resolve('10', 100))
})

p1.then(value => alert(value)).catch(err => console.error(err))
p1.reject(new Error('denied')) // expect an error in the console

// Example: Resolve a promise prematurely
const p2 = cancellablePromise((resolve, reject) => {
  setTimeout(() => resolve('blop'), 100)
})

p2.then(value => alert(value)).catch(err => console.error(err))
p2.resolve(200) // expect an alert with 200

3
ankita kumari 2019-11-04 21:05.

オブザーバブルはしばしば約束と比較されます。主な違いは次のとおりです。

オブザーバブルは宣言型です。計算はサブスクリプションまで開始されません。Promiseは作成後すぐに実行されます。これにより、オブザーバブルは、結果が必要なときにいつでも実行できるレシピを定義するのに役立ちます。

オブザーバブルは多くの値を提供します。約束は1つを提供します。これにより、オブザーバブルは時間の経過とともに複数の値を取得するのに役立ちます。

オブザーバブルは、チェーンとサブスクリプションを区別します。Promiseには.then()句しかありません。これにより、オブザーバブルは、作業を実行せずに、システムの他の部分で使用される複雑な変換レシピを作成するのに役立ちます。

Observables subscribe()は、エラーの処理を担当します。約束は、子の約束にエラーをプッシュします。これにより、オブザーバブルは一元化された予測可能なエラー処理に役立ちます。

これは、ANGULAR.IOドキュメントで見つかる可能性のある最も単純な違いです。残りの答えはほとんどの人がそれ自身の場所で正しいです

3
Yogesh Waghmare 2019-12-30 21:11.
  1. Promiseは熱心ですが、Observableは怠惰です。
  2. Promiseは常に非同期ですが、Observableは同期または非同期のいずれかになります。
  3. Promiseは単一の値を提供できますが、Observableは
    値のストリーム(0から複数の値まで)です。
  4. RxJS演算子をObservableに適用して、新しい調整されたストリームを取得できます。
2
Chirag 2019-04-15 22:55.

observableとpromiseの基本的な違いは次のとおりです。

2
Vignesh 2020-01-02 07:46.
  1. 約束は単一の値または解決にのみ焦点を合わせており、オブザーバブルはデータのストリームです。

  2. オブザーバブルはキャンセルできますが、プロミスはキャンセルできません。

最も知られていないもの、少なくとも私にとっては

  1. Promiseは常に非同期の性質を持っていますが、オブザーバブルは同期と非同期の両方にすることができます。
1
Jitendra Dhadavi 2020-06-10 22:07.

約束する

Promiseは、非同期操作が完了または失敗したときに単一のイベントを処理します。

注:キャンセルをサポートするPromiseライブラリがありますが、ES6Promiseはこれまでのところサポートしていません。

観察可能

Observableは(多くの言語で)ストリームのようなものであり、イベントごとにコールバックが呼び出される0個以上のイベントを渡すことができます。

1
Kamran Khatti 2020-09-30 10:21.

一言で言えば、PromiseObservableの主な違いは次のとおりです。

  • Promiseは熱心ですが、Observableは怠惰です。
  • Promiseは常に非同期ですが、Observableは同期または非同期のいずれかになります。
  • Promiseは単一の値を提供できますが、Observableは値のストリーム(0から複数の値まで)です。
  • RxJS演算子をObservableに適用して、新しい調整されたストリームを取得できます。

より詳細な情報はこの記事にあります

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

HMSプリンスオブウェールズの橋はスターウォーズからまっすぐです

HMSプリンスオブウェールズの橋はスターウォーズからまっすぐです

BAE Systems Maritimeは昨日、英国海軍の2番目のクイーンエリザベスクラスの空母であるHMSプリンスオブウェールズのブリッジモジュールを展開しました。公海を航海するよりも、アウターリムの惑星を周回してタイファイターを発射する必要があるようです。70,000の排水量のトン運搬船は、2020年に就役し、姉のエリザベス女王と同様に、約40機の航空機を運ぶ予定です。

ルイビルはサヨナラゲームでウェイクフォレストを倒すために家を盗んだ

ルイビルはサヨナラゲームでウェイクフォレストを倒すために家を盗んだ

ルイビルは、通常の大学野球の強みであるピッチング、ディフェンス、スマートベースランニングを通じて、全国ランキングのトップ5と19-2の会議記録への道を歩みました。昨夜、彼らは野球の最もエキサイティングなプレーの1つである盗塁を使用して、ウェイクフォレストのスイープを完了しました。

おいしいツイストのためにコーンブレッドであなたの次のサンドイッチを作りましょう

おいしいツイストのためにコーンブレッドであなたの次のサンドイッチを作りましょう

粗いパン粉とふわふわの食感のコーンブレッドは、唐辛子を吸い上げるのに理想的な乗り物です。しかし、それだけではありません。

別の驚くべきマーベルヒーローがキャプテンアメリカに参加します:シビルウォー!

別の驚くべきマーベルヒーローがキャプテンアメリカに参加します:シビルウォー!

ニール・ブロムカンプが、チャッピーが第10地区をどのように遅らせたのかについて話します。フォースの覚醒の噂は、次の予告編に何を期待するかについてのいじめを提供します。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language