Observable und Promise in Angular

In diesem Artikel werden wir Observable und Promise in Angular anhand einer schrittweisen praktischen Implementierung diskutieren.

Agenda

• Synchron vs. asynchron
• Beobachtbar vs. Versprechen

• Im synchronen Prozess werden mehrere Aufgaben nacheinander ausgeführt, was bedeutet, dass die zweite Aufgabe auf den Abschluss der ersten Aufgabe wartet. In diesem Fall muss der Thread warten, bevor er zu einer anderen Aufgabe übergeht.
• Eine andere Seite: Im asynchronen Prozess werden mehrere Prozesse gleichzeitig ausgeführt, es wird nicht auf die vollständige vorherige Aufgabe gewartet. Es wird einfach mit der nächsten Aufgabe fortgefahren und die Ausführung gestartet.

Werte aussenden

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

In einigen Fällen müssen wir das Observable bei Bedarf abbestellen, da es im Hintergrund ausgeführt wird und manchmal ein Speicherverlustproblem entsteht. Deshalb müssen wir mit diesem Szenario umgehen.

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

Klicken Sie auf den folgenden Link zur offiziellen Dokumentation, um mehr über RxJS zu erfahren

https://rxjs.dev/guide/overview

GitHub-Link

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

Abschluss

In diesem Artikel haben wir den Unterschied zwischen Promise und Observable anhand einiger praktischer Beispiele besprochen.

Viel Spaß beim Lernen!