Observable y Promesa en Angular

En este artículo, analizaremos Observable y Promise en Angular con la ayuda de una implementación práctica paso a paso.

Agenda

• Síncrono Vs Asíncrono
• Observable Vs Promesa

• En el proceso síncrono, se ejecutan varias tareas una tras otra, lo que significa que la segunda tarea está esperando que se complete la primera tarea. En ese caso, el subproceso debe esperar antes de pasar a otra tarea.
• Por otro lado, en el proceso asincrónico hay múltiples procesos ejecutados simultáneamente, no esperará a que se complete la tarea anterior. Simplemente pasará a la siguiente tarea y comenzará la ejecución.

Emitir valores

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

En algunos casos, debemos cancelar la suscripción del observable si es necesario porque se ejecuta en segundo plano y, a veces, creará un problema de pérdida de memoria. Es por eso que tenemos que manejar ese escenario.

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

Consulte el siguiente enlace relacionado con la documentación oficial para comprender más sobre RxJS

https://rxjs.dev/guide/overview

Enlace GitHub

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

Conclusión

En este artículo, discutimos la diferencia entre Promise y Observable con algunos ejemplos prácticos.

¡Feliz aprendizaje!