Observable et Promise en Angular

Dans cet article, nous discuterons d'Observable et de Promise dans Angular à l'aide d'une mise en œuvre pratique étape par étape.

Ordre du jour

• Synchrone Vs Asynchrone
• Observable Vs Promesse

• Dans le processus synchrone, plusieurs tâches sont exécutées les unes après les autres, ce qui signifie que la deuxième tâche attend l'achèvement de la première tâche. Dans ce cas, le thread doit attendre avant de passer à une autre tâche.
• Un autre côté, dans le processus asynchrone, plusieurs processus sont exécutés simultanément, il n'attendra pas la fin de la tâche précédente. Il passera simplement à la tâche suivante et commencera l'exécution.

Émettre des valeurs

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

Dans certains cas, nous devons désabonner l'observable si nécessaire, car il s'exécute en arrière-plan et crée parfois un problème de fuite de mémoire. C'est pourquoi nous devons gérer ce scénario.

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

Consultez le lien ci-dessous lié à la documentation officielle pour en savoir plus sur RxJS

https://rxjs.dev/guide/overview

Lien GitHub

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

Conclusion

Dans cet article, nous avons discuté de la différence entre Promise et Observable avec quelques exemples pratiques.

Bon apprentissage!