Créez un Observable et souscrivez-y

Dans les applications web sans framework, la gestion de l'asynchrone se fait généralement avec trois outils :

• les callbacks : des fonctions appelées lorsque l'événement attendu a lieu ;

• les Promise : des objets avec des méthodesthen()etcatch()qui sont appelées lorsque l'événement attendu a lieu ;

• les fonctions async/await : des fonctions qui mettent leur exécution en attente jusqu'à l'arrivée de l'événement attendu — ces fonctions sont construites sur les Promises

Angular, étant un framework très complet, nous fournit un nouvel outil pour gérer des événements qui ont lieu au cours du temps : la bibliothèque RxJS et ses Observables.

Soyez observateur

Le principe de base est très simple :

• Un Observable est un objet qui émet des valeurs au cours du temps.

• Il est typé : il émettra toujours des valeurs du même type.

• Un Observable peut émettre une erreur : à ce moment-là, l'Observable est détruit et n'émettra plus de valeurs.

• L'Observable peut également être complété : il est aussi détruit et n'émettra plus rien.

Comme son nom l'indique, on peut observer un Observable et réagir à ses émissions – c'est d'ailleurs tout l'intérêt ! On observe un Observable avec sa méthodesubscribe()   pour "souscrire" à l'Observable.

Comme toujours, les concepts de programmation sont plus faciles à comprendre quand on les pratique, donc pratiquons !

Créez et souscrivez à un Observable

Le premier Observable que vous allez créer va émettre des nombres croissants toutes les secondes.

Ouvrez le fichier chapitres/chapitre-2/home.component.tset créez votre Observable comme propriété de la classe :

export class HomeComponent {
  interval$ = interval(1000);
}

Ici, vous utilisez la méthodeinterval()(importée depuisrxjs  ) pour créer un Observable qui émet des nombres croissants, en passant le nombre de millisecondes qui doit séparer les émissions. Vous stockez cet Observable dans une propriété nomméeinterval$.

Vous allez utiliser une approche très simple pour souscrire à cet Observable (qui sera à proscrire par la suite, mais vous verrez bien !). On peut passer un callback à la méthodesubscribe()qui sera exécuté à chaque émission, donc vous pouvez faire ceci dans le constructor :

constructor() {
    this.interval$.subscribe(value => console.log(value));
}

Si vous ouvrez votre navigateur à la racine de l'application et que vous ouvrez la console, vous verrez les émissions de cet Observable :

Toutes les secondes, l'Observable émet un nombre. Ce nombre est ensuite capté et traité par la méthode passée àsubscribe() .

Il est important de noter que si on ne souscrit pas à un Observable, dans l'énorme majorité des cas, il n'émet rien. Par exemple, attendons 3 secondes avant de souscrire àinterval$. Remplacez la souscription actuelle avec :

constructor() {
    setTimeout(() => this.interval$.subscribe(value => console.log(value)), 3000);
}

Si vous regardez maintenant la console, vous verrez le même résultat qu'avant, sauf qu'il commence au bout de 3 secondes.

Pour une dernière expérience importante, mélangeons les deux exemples précédents :

constructor() {
    this.interval$.subscribe(value => console.log(value));
    setTimeout(() => this.interval$.subscribe(value => console.log(value)), 3000);
}

Voici le résultat :

On voit qu'il y a donc deux instances de l'Observable. Il est très important de se rendre compte que le comportement par défaut d'un Observable est de créer une nouvelle instance pour chaque souscription.

Affichez les émissions avec le pipeasync

Très souvent, l'objectif sera d'afficher les émissions d'un Observable dans le DOM, et pour cela, Angular nous fournit le pipe async. Contrairement à tous les autres pipes que vous avez rencontrés jusqu'ici, le pipeasyncne formate pas des données : il souscrit à un Observable et insère les émissions dans le DOM.

Commençons par commenter le constructor qui ne servira plus :

export class HomeComponent {
  interval$ = interval(1000);

  // constructor() {
  //   this.interval$.subscribe(value => console.log(value));
  //   setTimeout(() => this.interval$.subscribe(value => console.log(value)), 3000);
  // }
}

On peut maintenant utiliser le pipeasyncpour souscrire à notre Observable et en afficher les émissions dans le template :

@Component({
  selector: 'app-home',
  imports: [
    ConsoleTipComponent,
    ChapterTitleComponent,
    AsyncPipe
  ],
  template: `
    <app-chapter-title>Créez un Observable et souscrivez-y</app-chapter-title>
    <app-console-tip/>
    <p>{{ interval$ | async }}</p>
  `,
  styles: ``
})

Dans le DOM, vous voyez maintenant les nombres qui augmentent :

Certes cet exemple est très simple et n'est pas très utile, mais le concept de souscrire à un Observable, que ce soit avec la méthodesubscribe()ou le pipeasync, est très important – vous vous en servirez très, très souvent. 

À vous de jouer

Contexte

On souhaite que les utilisateurs puissent savoir depuis combien de temps ils sont connectés à notre application.

Consignes

Vous allez créer un component simple qui montre aux utilisateurs depuis combien de secondes ils sont connectés :

• le component utilisera le pipe async pour compter les secondes, en affichant un message lisible par l'utilisateur

• le message peut être affiché dans un simple paragraphe

• l'application d'accompagnement utilise Tailwind, donc vous pouvez (si vous le souhaitez) vous amuser en utilisant toutes les classes que ce framework met à disposition (facultatif)

En résumé

• Les Observables émettent des valeurs au cours du temps ;

• La méthodeinterval()permet de générer un Observable qui émet des nombres croissants ;

• La méthodesubscribe()permet de souscrire à un Observable dans le code TypeScript ;

• Le pipeasyncsouscrit à un Observable pour afficher ses émissions dans le template.

Dans le prochain chapitre, vous allez commencer à apprendre comment manipuler les émissions des Observables avec les opérateurs. C'est parti !