Observable

Dans RxJS, la structure utilisée pour représenter un flux de données asynchrones est Observable.

Un Observable peut-être vu comme une promesse qui est capable de retourner plusieurs valeurs.

// Angular 5
// import {Observable} from 'rxjs/Observable'

// Angular 6
import {Observable} from 'rxjs'

// Créer un observable

//      next() permet d emettre une valeur
//      complete() permet de fermer l'observable
const observable$ = Observable.create(observer => {
    setTimeout(()=>  observer.next(1), 1000)
    setTimeout(()=>  observer.next(2), 2000)
    setTimeout(()=>  observer.complete(), 3000)
})

// Créer un Observateur
observable$.subscribe(
    value => console.log(value),
    error => console.log(error),
    () => console.log('terminé'))

// Résultat

// 1
// 2
// terminé

Convertir en observable

• Depuis des valeurs :

import {Observable, of} from 'rxjs'

const obs$ = of('foo', 'bar');

• Dépuis un tableau

import {Observable, from} from 'rxjs';


const obs$ = from([1,2,3]);

• Depuis un événement

import { Observable, fromEvent} from 'rxjs';

const obs$ = fromEvent(document.querySelector('button'), 'click');

• Depuis une promesse

import { Observable, from } from 'rxjs'

const obs$ = from(fetch('/users'));

HTTP Client

Les requêtes HTTP envoyées via le client HTTP Angular retournent des résultats de type Observable.

// resultat$ est de type Observable
const resultat$ = this._http.get("https://jsonplaceholder.typicode.com/posts");