Dans RxJS, un observable est une fonction utilisée pour créer un observateur et l'attacher à la source d'où les valeurs sont attendues. Par exemple, les clics, les événements de souris provenant d'un élément DOM ou d'une requête HTTP, etc. sont des exemples d'observables.
En d’autres termes, vous pouvez dire que l’observateur est un objet doté de fonctions de rappel, qui est appelé lorsqu’il y a une interaction avec l’Observable. Par exemple, la source a interagi pour un exemple, clic sur un bouton, Http demande, etc
Les observables peuvent également être définis comme des collections Push paresseuses de plusieurs valeurs. Voyons un exemple simple pour comprendre comment les observables sont utilisés pour pousser les valeurs.
arbre binaire vs bst
Voir l'exemple suivant :
import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); Dans l'exemple ci-dessus, il existe un observable qui pousse les valeurs 10, 20, 30 immédiatement et de manière synchrone lors de l'abonnement, mais la valeur 40 sera poussée après une seconde depuis l'appel de la méthode d'abonnement.
Si vous souhaitez invoquer l'observable et voir les valeurs ci-dessus, vous devez vous y abonner. Voir l'exemple suivant :
import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); console.log('These are the values just before subscribe'); observable.subscribe({ next(x) { console.log('We have got value ' + x); }, error(err) { console.error('something wrong occurred: ' + err); }, complete() { console.log('Done successfully'); } }); console.log('This value is just after subscribe'); Sortir:
Lorsque nous exécutons le programme ci-dessus, nous obtenons le résultat suivant sur la console :
Les observables sont des généralisations de fonctions
Nous savons que les observables sont des fonctions qui agissent comme des clics, des événements de souris provenant d'un élément DOM ou d'une requête HTTP, etc. mais les observables ne sont pas comme des EventEmitters, ni comme des promesses pour plusieurs valeurs. Dans certains cas, les observables peuvent agir comme des EventEmitters, notamment lorsqu'ils sont multidiffusés à l'aide de sujets RxJS, mais généralement, ils n'agissent pas comme des EventEmitters.
tableau js
Les observables sont comme des fonctions avec zéro argument, mais les généralisent pour autoriser plusieurs valeurs.
Voyons un exemple pour comprendre cela clairement.
Un exemple simple de fonction :
function foo() { console.log('Hello World!'); return 123; } const x = foo.call(); // same as foo() console.log(x); const y = foo.call(); // same as foo() console.log(y); Sortir:
Vous verrez le résultat suivant :
'Hello World!' 123 'Hello World!' 123
Écrivons le même exemple, mais avec des observables :
import { Observable } from 'rxjs'; const foo = new Observable(subscriber => { console.log('Hello World!'); subscriber.next(123); }); foo.subscribe(x => { console.log(x); }); foo.subscribe(y => { console.log(y); }); Sortir:
Vous verrez le même résultat que ci-dessus :
Vous pouvez le voir car les fonctions et les observables sont des calculs paresseux. Si vous n'appelez pas la fonction, le console.log('Hello World!') n'aura pas lieu. De plus, avec Observables, si vous ne l'appelez pas avec abonnement, le console.log('Hello World!') ne se produira pas.
Fonctionnement d'un observable
Il y a trois phases dans un observable :
filigrane dans Word
- Créer des observables
- S'abonner aux observables
- Exécuter des observables
Créer des observables
Il existe deux manières de créer des observables :
- Utilisation de la méthode constructeur Observable
- Utilisation de la méthode Observable create()
Utilisation de la méthode constructeur Observable
Créons un observable à l'aide de la méthode constructeur observable et ajoutons un message « Ceci est mon premier observable » à l'aide de la méthode Subscriber.next disponible dans Observable.
Fichier testrx.js :
import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Vous pouvez également créer un observable à l'aide de la méthode Observable.create() comme suit :
import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); S'abonner aux observables
S'abonner à un observable, c'est comme appeler une fonction. Il fournit des rappels vers lesquels les données seront transmises.
Vous pouvez vous abonner à un observable en utilisant la syntaxe suivante :
Syntaxe:
clé du candidat
observable.subscribe(x => console.log(x));
Voir l'exemple ci-dessus avec abonnement :
Fichier testrx.js :
import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); observer.subscribe(x => console.log(x)); Sortir:
Exécuter des observables
Un observable est exécuté lorsqu'il est abonné. Il existe généralement trois méthodes chez un observateur qui sont notifiées :
suivant(): Cette méthode est utilisée pour envoyer des valeurs comme un nombre, une chaîne, un objet, etc.
complet(): Cette méthode n'envoie aucune valeur. Cela indique que l’observable est terminé.
erreur(): Cette méthode est utilisée pour notifier l'erreur le cas échéant.
Voyons un exemple dans lequel nous avons créé l'observable avec les trois notifications et exécutons cet exemple :
0,06 en fraction
Fichier testrx.js :
import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { try { subscriber.next('This is 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 completed now.')); La méthode d'erreur n'est invoquée qu'en cas d'erreur. Lorsque vous exécutez le code ci-dessus, vous verrez la sortie suivante dans la console.
Sortir:
