ObservableとPromiseの違いは何ですか？

JavaScriptで非同期操作を処理する際に、PromiseとObservableという2つの重要なコンセプトがあります。これら2つの間には多くの違いがありますが、そのうちの一つの重要な違いは、インスタンス生成時に値が生成されるタイミングです。以下で詳しく説明します。

Promiseの特性

Promiseは、非同期計算が完了した後に、値を提供することを約束するオブジェクトです。Promiseが生成された時点で、非同期操作はすぐに実行され始めます。そして、Promiseのインスタンスは、成功か失敗のどちらかによって解決されます。

Promiseの作成時に値が生成されるため、次のようなコードで説明できます:

const promise = new Promise((resolve, reject) => {
    console.log("Promiseの処理が始まりました");
    setTimeout(() => {
        resolve("処理が完了しました");
    }, 1000);
});

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

Observableの特性

Observableは、値やイベントのストリームを扱う強力なツールです。Observableの特性として、newでインスタンス化された段階では値が生成されません。その代わりに、Observableは誰かがサブスクライブした時に初めて値の生成を始めます。

以下のコードでその動作を示します:

import { Observable } from 'rxjs';

const observable = new Observable((subscriber) => {
    console.log("Observableの処理がサブスクライブ時に始まります");
    setTimeout(() => {
        subscriber.next("処理が完了しました");
        subscriber.complete();
    }, 1000);
});

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

違いのまとめ

特性	Promise	Observable
値の生成タイミング	newの時点で開始	サブスクライブ時に開始
キャンセル可能かどうか	不可能	可能
値の数	一つの値を返す	複数の値をストリームとして返す

参考文献

Uma引用: MDN Web DocsのUsing Promisesおよび、ReactiveXのReactiveX公式サイト。

その他の参考記事:angular observable