RxJS - Observables

Un observable est une fonction qui crée un observateur et l'attache à la source où les valeurs sont attendues, par exemple, des clics, des événements de souris d'un élément dom ou d'une requête Http, etc.

Observer is an object with callback functions, qui sera appelé lorsqu'il y a interaction avec l'Observable, c'est-à-dire que la source a interagi pour un exemple de clic sur un bouton, une requête Http, etc.

Nous allons discuter des sujets suivants dans ce chapitre -

• Créer observable
• Abonnez-vous Observable
• Exécuter Observable

Créer observable

L'observable peut être créé en utilisant le constructeur observable et également en utilisant la méthode de création observable et en lui passant la fonction subscribe comme argument comme indiqué ci-dessous -

testrx.js

import { Observable } from 'rxjs';

var observable = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

Nous avons créé un observable et ajouté un message «Mon premier observable» en utilisant subscriber.next méthode disponible dans Observable.

Nous pouvons également créer Observable en utilisant la méthode Observable.create () comme indiqué ci-dessous -

testrx.js

import { Observable } from 'rxjs';
var observer = Observable.create(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

Abonnez-vous Observable

Vous pouvez vous abonner à un observable comme suit -

testrx.js

import { Observable } from 'rxjs';

var observer = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);
observer.subscribe(x => console.log(x));

Lorsque l'observateur est abonné, il démarre l'exécution de l'Observable.

C'est ce que nous voyons dans la console du navigateur -

Exécuter Observable

Une observable est exécutée lorsqu'elle est abonnée. Un observateur est un objet avec trois méthodes qui sont notifiées,

next() - Cette méthode enverra des valeurs comme un nombre, une chaîne, un objet, etc.

complete() - Cette méthode n'enverra aucune valeur et indique l'observable comme terminée.

error() - Cette méthode enverra l'erreur le cas échéant.

Créons l'observable avec les trois notifications et exécutons la même chose.

testrx.js

import { Observable } from 'rxjs';
var observer = new Observable(
   function subscribe(subscriber) {
      try {
         subscriber.next("My First Observable");
         subscriber.next("Testing Observable");
         subscriber.complete();
      } catch(e){
         subscriber.error(e);
      }
   }
);
observer.subscribe(x => console.log(x), (e)=>console.log(e), 
   ()=>console.log("Observable is complete"));

Dans le code ci-dessus, nous avons ajouté la méthode suivante, complète et d'erreur.

try{
   subscriber.next("My First Observable");
   subscriber.next("Testing Observable");
   subscriber.complete();
} catch(e){
   subscriber.error(e);
}

Pour exécuter suivant, complet et erreur, nous devons appeler la méthode d'abonnement comme indiqué ci-dessous -

observer.subscribe(x => console.log(x), (e)=>console.log(e), 
   ()=>console.log("Observable is complete"));

La méthode d'erreur ne sera appelée que s'il y a une erreur.

Ceci est la sortie vue dans le navigateur -