No RxJS, um observável é uma função usada para criar um observador e anexá-lo à fonte de onde os valores são esperados. Por exemplo, cliques, eventos de mouse de um elemento DOM ou uma solicitação Http, etc. são exemplos de observáveis.
Em outras palavras, pode-se dizer que observador é um objeto com funções de callback, que é chamado quando há interação com o Observable. Por exemplo, a fonte interagiu por exemplo, clique no botão, HTTP solicitação, etc.
Observáveis também podem ser definidos como coleções Push preguiçosas de vários valores. Vamos ver um exemplo simples para entender como os observáveis são usados para enviar os valores.
Veja o exemplo a seguir:
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); }); No exemplo acima, há um observável que envia os valores 10, 20, 30 imediatamente e de forma síncrona quando inscrito, mas o valor 40 será enviado após um segundo desde que o método subscribe foi chamado.
Se você deseja invocar o observável e ver os valores acima, você deve assiná-lo. Veja o exemplo a seguir:
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'); Saída:
Ao executarmos o programa acima, teremos o seguinte resultado no console:
Observáveis são generalizações de funções
Sabemos que observáveis são funções que atuam como cliques, eventos de mouse de um elemento DOM ou uma solicitação Http, etc. mas observáveis não são como EventEmitters, nem são como promessas para vários valores. Em alguns casos, os observáveis podem agir como EventEmitters, ou seja, quando são transmitidos por multicast usando assuntos RxJS, mas geralmente não agem como EventEmitters.
Observáveis são como funções com zero argumentos, mas generalizam-nas para permitir múltiplos valores.
obter o comprimento da matriz em c
Vejamos um exemplo para entender isso claramente.
Um exemplo simples de função:
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); Saída:
Você verá a seguinte saída:
'Hello World!' 123 'Hello World!' 123
Vamos escrever o mesmo exemplo, mas com Observáveis:
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); }); Saída:
tamanho da fonte de látex
Você verá a mesma saída acima:
Você pode ver isso porque tanto as funções quanto os Observáveis são cálculos preguiçosos. Se você não chamar a função, o console.log('Hello World!') não acontecerá. Além disso, com Observables, se você não 'chamar' com subscribe, o console.log('Hello World!') não acontecerá.
Funcionamento de um Observável
Existem três fases em um observável:
- Criando Observáveis
- Assinando Observáveis
- Executando Observáveis
Criando Observáveis
Existem duas maneiras de criar observáveis:
- Usando o método construtor Observable
- Usando o método create() observável
Usando o método construtor Observable
Vamos criar um observável usando o método construtor observável e adicionar uma mensagem, 'Este é meu primeiro Observável' usando o método subscriber.next disponível dentro do Observable.
arquivo testrx.js:
import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Você também pode criar Observable usando o método Observable.create() da seguinte forma:
import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Assinando Observáveis
Inscrever-se em um observável é como chamar uma função. Ele fornece retornos de chamada para onde os dados serão entregues.
Você pode assinar um observável usando a seguinte sintaxe:
Sintaxe:
observable.subscribe(x => console.log(x));
Veja o exemplo acima com subscribe:
arquivo 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)); Saída:
Executando Observáveis
Um observável é executado quando é inscrito. Geralmente existem três métodos em um observador que são notificados:
próximo(): Este método é usado para enviar valores como número, string, objeto etc.
junções e tipos de junções
completo(): Este método não envia nenhum valor. Indica que o observável está concluído.
erro(): Este método é usado para notificar o erro, se houver.
Vamos ver um exemplo onde criamos o observável com todas as três notificações e executamos esse exemplo:
arquivo 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.')); O método error é invocado somente se houver um erro. Ao executar o código acima, você verá a seguinte saída no console.
Saída:
