rxjs

Definition

Un Observable est un producteur de données qui peut être Observer.
on l’observe avec la méthode subscribe et cette observation sera exécutée par un Observer.

var observable = Rx.Observable.create(function(observer)  {
    observer.next("one result");
  });

var observer = observable.subscribe(e => console.log(e));

Rx.Observable.create(function(observer) {
   observer.next("vue");
   observer.next("vuue");
   observer.complete("inutile");
   observer.next("pas vue");
}).subscribe(
   (e) => console.log("next: " + e)
 , (e) => console.log("error: " + e)
 , (e) => console.log("complete")
 );

Différences avec une promesse

un observable est ‘lazy’. Tant que vous n’appelez pas subscribe() sur un observable que vous avez créé, le code que contient cet observable ne s’exécute pas
on peut annuler un observable
un observable peut être répété. S’il a précédemmement échoué (en raison d’une erreur réseau par exemple), il peut réussir lors d’une nouvelle exécution future (à l’aide de retry()) plus tard. Tandis qu’une promise conserve en cache le résultat de sa première exécution.

Les Observables peuvent gérer une infinité de valeurs de retour.

Rx.Observable.create(function(observer) {
    setTimeout(() => observer.next("valeur A"), 700);
    setTimeout(() => observer.next("valeur B"), 400);
})
 .subscribe(e => console.log(e));

Ceci est possible parce que les Observables nous fournissent des streams.

Avantages

Il est possible de :

• merger des Observables, ce qui permet d’écouter plusieurs Observables avec un même subscriber.
• écouter un même Observable avec plusieurs subscribers par l’intermédiaire des Subjects.
  RxJS met à notre disposition tout l’arsenal de la programmation fonctionnelle.

Rx.Observable.of(1, 2, 3, 4, 5, 6)
  .filter(e => e % 2 == 0 )
  .do((e) => console.log("filtred value: " + e)) //très utile pour débugger.
  .map(e => e*3)
  .subscribe(e => console.log(e));

Creation

• Observable.create
• Observable.of
• Observable.fromEvent

Subject

• est à la fois un Observable et un Observer, c’est à dire que l’on va à la fois pouvoir .subscribe() et appeler la méthode .next() dessus.

  • permet d’avoir plusieurs subscribers sur un observable

  le Subject a un etat et une liste d’Observers

Ref : https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/subjects.md

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .subscribe(() => console.log("Bonjour!"));

Take

.take(n) permet de ne prendre que lesn premières valeurs renvoyées par l’Observable.