O que é o padrão Observable
?
Observable
é um padrão para utilizar programação reativa e funcional, onde o código é executado por demanda, um Observable
possuí o conceito de stream
de dados, onde uma resposta da operação pode obter multiplos valores em uma única execução, essa stream
de dados pode ser manipulada através de uma pipe
onde a cada operação pode ser manipupado os valores dos dados.
Principais funções do Observable:
-
next
: Essa operação retorna o próximo valor a ser respondido pelastream
de dados. EX:import { Observable } from 'rxjs'; const observable = new Observable<number>((observer) => { observer.next(1); observer.next(2); observer.next(3); });
-
complete
: Essa operação completa a execução de umObservable
, no exemplo a cima, após o retorno de cada execuçãonext
ele completa a execução doobservable
e encerra a execução.import { Observable } from 'rxjs'; const observable = new Observable<number>((observer) => { observer.next(1); observer.next(2); observer.next(3); observer.complete(); });
-
error
: Essa operação executa um erro nastream
de dados de um observable, onde cancela imediatamente a execução dastream
, mas ainda executa as operações antes do sua execução. EX:import { Observable } from 'rxjs'; const observable = new Observable<number>((observer) => { observer.next(1); observer.error(new Error('Error in stream')); observer.next(2); observer.complete(); });
-
subscribe
: Essa operação faz com que quem a execute se inscreva nastream
de dados e de fato realize a execução das operações mapeadas noObservable
, a cada execução da funçãonext
retorna o seu valor.import { Observable } from 'rxjs'; const observable = new Observable<number>((observer) => { observer.next(1); observer.next(2); observer.next(3); observer.complete(); }); observable.subscribe((value) => { console.log(value); // 1, 2, 3 });
-
unsubscribe
: Essa operação cancela a execução dostream
de dados, mas ainda mantem as execuções da funçãonext
antes da sua chamada.
import { Observable } from 'rxjs';
const observable = new Observable<number>((observer) => {
observer.next(1);
setTimeout(() => {
observer.unsubscribe();
}, 100);
setTimeout(() => {
observer.next(2);
}, 200);
});
observable.subscribe((value) => {
console.log(value); // 1
});