Angular での Observable と Promise

この記事では、Angular での Observable と Promise について、段階的な実践的な実装を交えて説明します。

議題

• 同期と非同期
• オブザーバブルとプロミス

• 同期プロセスでは、複数のタスクが次々に実行されます。これは、2 番目のタスクが最初のタスクの完了を待っていることを意味します。その場合、スレッドは別のタスクに移動する前に待機する必要があります。
• 別の側面として、非同期プロセスでは複数のプロセスが同時に実行され、前のタスクが完了するまで待機しません。次のタスクに移動して実行を開始するだけです。

発光値

var observable = new Observable(res => {
      res.next("Hello Piyush");
      res.next("Hello Vivek");
      res.next("Hello Rajesh");
    });
    observable.subscribe(console.log)

    //Output --> Observable can emmit multiple values
    //Hello Piyush
    //Hello Vivek
    //Hello Rajesh

    var promise = new Promise(res => {
      res("Hello Piyush");
      res("Hello Vivek");
      res("Hello Rajesh");
    });
    promise.then(console.log)

    //output
    //Hello Piyush --> Promise will emit only single values that's why other two values are not emmited.

var observable = new Observable(res => {
      res.next("Hello....");
    });
observable.subscribe(console.log) //Whenever subscribe observable then only it will emmit values beacuse it is lazy load.

//Output
//Hello....

var promise = new Promise(res => {
      console.log("Promise start executing..."); //In console can see this output before calling promise it will initialized on creation and eagerly load.
      res("Hello....");
    });
//Call promise
promise.then(console.log)

//Output
//Promise start executing...
//Hello....

//Async Promise
var promise = new Promise(res => {
      console.log("Start Executing...");

      res("Hello...");

      console.log("Execution End...");
    });
promise.then(console.log)

//Output
//Start Executing...
//Execution End...
//Hello...


//Async Observable
var observable = new Observable(res => {
      console.log("Start Executing...");
      setTimeout(() => {
        res.next("Hello Piyush");
        res.next("Hello Vivek");
        res.next("Hello Rajesh");
      })
        , 1000
      console.log("Execution End...");
    });
observable.subscribe(console.log)

//Output
//Start Executing...
//Execution End...
//Hello Piyush
//Hello Vivek
//Hello Rajesh

//Sync Observable
var observable = new Observable(res => {
      console.log("Start Executing...");
      res.next("Hello Piyush");
      res.next("Hello Vivek");
      res.next("Hello Rajesh");
      console.log("Execution End...");
    });
observable.subscribe(console.log)

//Output
//Start Executing...
//Hello Piyush
//Hello Vivek
//Hello Rajesh
//Execution End...

場合によっては、オブザーバブルはバックグラウンドで実行され、場合によってはメモリ リークの問題が発生するため、必要に応じてサブスクライブを解除する必要があります。だからこそ、私たちはそのシナリオに対処する必要があるのです。

//observable
    const observable = new Observable((res) => {

      let count = 0;
        setInterval(() => {
          count = count + 1;
          res.next(count);
        }
          , 1000)
    })

//subscribe the observable
    this.subscription = observable.subscribe(ele => { console.log(ele) })

//unsubscribe the observable
    setTimeout(() => {
      this.subscription?.unsubscribe();
    }
    ,12000)

RxJS についてさらに理解するには、公式ドキュメントに関連する以下のリンクを確認してください。

https://rxjs.dev/guide/overview

GitHub リンク

https://github.com/Jaydeep-007/ObservableAndPromiseDemo/tree/master

結論

この記事では、Promise と Observable の違いについて、いくつかの実際的な例を示しながら説明しました。

楽しく学習しましょう！