Observable Angular VS. Promise

1. Qu’est-ce que Promise dans Angular
2. Qu’est-ce qui est Observable dans Angular
3. Principales différences entre la promesse et l’observable dans Angular

Angular est un framework pour créer des applications Web. Angular a deux principaux types de gestion de données : les observables et les promises.

Les implémentations Observables et Promises nous permettent de gérer plus facilement les programmes asynchrones, et ils utilisent des API distinctes et ont des motifs légèrement différents.

Cet article expliquera ce qui est Observable et Promise dans Angular. De plus, nous expliquerons la différence fondamentale entre Observable et Promise.

Qu’est-ce que Promise dans Angular

Les Promises sont une construction JavaScript qui fournit un moyen de gérer les opérations asynchrones. Ils représentent un résultat éventuel d’une opération asynchrone et peuvent être dans l’un des trois états suivants : en attente, rempli ou rejeté.

Les promesses peuvent également être chaînées pour représenter une série d’opérations asynchrones dépendantes.

De plus, une promesse est un type d’objet qui peut produire une seule valeur dans le futur, soit une valeur résolue, soit une raison pour laquelle elle ne peut pas être résolue, ou elle peut être en attente.

Si vous êtes toujours perplexe, appliquez ceci à une situation réelle. Si vous faites une promesse à un ami, vous devez soit tenir la promesse, soit la rejeter ; pourtant, il y a des moments où vous êtes piégé au milieu, essayant de tenir la Promise mais ne le faisant pas.

De même, une Promise en programmation peut aussi travailler sur la même procédure.

Les inconvénients de Promise incluent :

1. Un appel ayant échoué n’a pas pu être réessayé.
2. Les promesses deviennent plus difficiles à gérer à mesure que notre application grandit.
3. L’utilisateur n’a pas pu annuler une demande à l’API.

Qu’est-ce qui est Observable dans Angular

Que sont exactement les observables dans Angular ? Il peut être comparé à une Promise dans sa forme la plus basique, et il a une valeur unique dans le temps.

Les Observables, en revanche, sont bien plus que cela. Angular Observables est plus puissant que Promises car il présente de nombreux avantages tels que de meilleures performances et un débogage plus facile.

Un Observable peut fournir de nombreuses valeurs au fil du temps, de la même manière que le fonctionnement du streaming, et il peut être rapidement interrompu ou réessayé en cas d’erreur. Les observables peuvent être couplés de différentes manières, ou il peut y avoir un concours pour voir qui peut utiliser le premier.

La librairie RxJS Observables est un outil puissant. De plus, ils sont comme des émetteurs d’événements qui peuvent émettre des valeurs illimitées dans le temps.

Désavantages:

1. Vous devez acquérir un cadre compliqué d’observable.
2. Vous pouvez vous retrouver à utiliser Observables dans des situations inattendues.

Principales différences entre la promesse et l’observable dans Angular

Discutons de certaines des différences entre Promise et Observable.

Exemple de Promise et Observable en Angular

Discutons d’un exemple qui nous aide à comprendre le concept de promesse et d’observable en détail.

Code dactylographié :

import { Component } from '@angular/core';
import { Observable, Observer, } from "rxjs";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    promiseTemp: Promise<boolean>;
  createPromise() {
    this.promiseTemp = this.testPromise(0);
  }
  observableTemp: Observable<boolean>;

  createObservable() {
    this.observableTemp = this.testObservable(0);
  }

  subscribeObservable() {
    this.observableTemp
      .subscribe(
        result => {
          console.log(`Observable Ok: ${result}`);
        },
        err => {
          console.error(err);
        });
  }
  observableNextTemp: Observable<boolean>;
  createObservableNext() {
    this.observableNextTemp = this.testObservableNext(0);
  }
  promiseTemp2: Promise<boolean>;
  createToPromiseByObservable() {
    this.promiseTemp2 = this.testObservable(0).toPromise();
  }
  observableForkJoinTemp: Observable<boolean[]>;
  countForkJoin = 2;

  testObservable(value: number): Observable<boolean> {
    console.log("create Observable");
    return Observable.create((observer: Observer<boolean>) => {
      console.log("execute Observable");
      this.testPromise2(value)
        .then(result => {
          observer.next(result);
          observer.complete();
        })
        .catch(err => {
          observer.error(err);
          observer.complete();
        });
    });
  }

  testObservableNext(value: number): Observable<boolean> {
    console.log("create Observable Next");
    return Observable.create((observer: Observer<boolean>) => {
      console.log("execute Observable Next");
      this.testPromise2(value)
        .then(result => {
          observer.next(result);

          setTimeout(() => {
            observer.next(result);
            observer.complete();
          }, 5000);

        })
        .catch(err => {
          observer.error(err)
        });
    });
  }

  testPromise(value: number): Promise<boolean> {
    console.log("creation");
    return new Promise((resolve, reject) => {
      console.log("execution");
      this.testPromise2(value)
        .then(result => {
          resolve(result);
        })
        .catch(reject);
    });
  }

  testPromise2(value: number): Promise<boolean> {
    return new Promise((resolve, reject) => {
      if (value > 1) {
        reject(new Error("testing"));
      } else {
        resolve(true);
      }
    });
  }
}

Code HTML:

<h2>Example of Promise and Observable </h2>

<br/>
<button (click)="createPromise()">Create Promise</button>
<br/>
<br/>
<button (click)="createObservable()">Create Observable</button>
<br/>
<br/>
<button (click)="subscribeObservable()">Subscribe Observable</button>
<br/>
<br/>
<button (click)="createObservableNext()">Create Observable Next</button>
<br/>
<br/>
<button (click)="createToPromiseByObservable()">Create Promise by Observable</button>
<br/>

Qu’est-ce qui est facile à utiliser entre une promesse ou un observable ? Voici donc une réponse simple à cette question.

Les promesses sont utilisées dans Angular pour résoudre les opérations asynchrones, et les observables sont utilisées lorsque les données proviennent d’une source externe comme une API.

Les promesses peuvent être résolues avec une seule valeur ou un tableau de valeurs, et les Observables émettent une ou plusieurs valeurs au fil du temps.

Ainsi, lors de la gestion d’une recherche HTTP, Promise ne peut gérer qu’une seule réponse pour la même requête ; cependant, s’il y a de nombreux résultats à la même requête, nous devons utiliser Observable.

Pour vérifier la démonstration en direct du code, cliquez ici.