Observable i Promise w Angular

W tym artykule omówimy Observable i Promise w Angular z pomocą praktycznej implementacji krok po kroku.

Porządek obrad

• Synchroniczne kontra asynchroniczne
• Obietnica obserwowalna kontra obietnica

• W procesie synchronicznym wiele zadań jest wykonywanych jedno po drugim, co oznacza, że ​​drugie zadanie oczekuje na zakończenie pierwszego zadania. W takim przypadku wątek musi poczekać, zanim przejdzie do innego zadania.
• Z drugiej strony, w procesie asynchronicznym wiele procesów jest wykonywanych jednocześnie, więc nie będzie czekać na zakończenie poprzedniego zadania. Po prostu przejdzie do następnego zadania i rozpocznie wykonywanie.

Emisja wartości

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...

W niektórych przypadkach musimy anulować subskrypcję elementu obserwowalnego, ponieważ jest on wykonywany w tle i czasami powoduje problem z wyciekiem pamięci. Dlatego musimy poradzić sobie z tym scenariuszem.

//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)

Sprawdź poniższy link do oficjalnej dokumentacji, aby dowiedzieć się więcej o RxJS

https://rxjs.dev/guide/overview

Link do GitHuba

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

Wniosek

W tym artykule omówiliśmy różnicę między Promise a Observable, podając kilka praktycznych przykładów.

Miłej nauki!