Наблюдаемые и обещания в Angular

В этой статье мы обсудим Observable и Promise в Angular с помощью пошаговой практической реализации.

Повестка дня

• Синхронный против асинхронного
• Наблюдаемое против обещания

• В синхронном процессе несколько задач выполняются одна за другой, что означает, что вторая задача ожидает завершения первой задачи. В этом случае поток должен ждать, прежде чем перейти к другой задаче.
• С другой стороны, в асинхронном процессе несколько процессов выполняются одновременно, он не будет ждать завершения предыдущей задачи. Он просто перейдет к следующей задаче и начнет выполнение.

Выдать значения

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 на нескольких практических примерах.

Счастливого обучения!