RxJS - Observáveis

Um observável é uma função que cria um observador e o anexa à fonte de onde os valores são esperados, por exemplo, cliques, eventos de mouse de um elemento dom ou uma solicitação Http, etc.

Observer is an object with callback functions, que será chamado quando houver interação com o Observable, ou seja, a fonte interagiu para um exemplo de clique de botão, solicitação Http, etc.

Vamos discutir os seguintes tópicos neste capítulo -

• Criar observável
• Inscrever-se observável
• Executar observável

Criar observável

O observável pode ser criado usando o construtor observável e também usando o método de criação observável e passando a função de inscrição como um argumento para ela, conforme mostrado abaixo -

testrx.js

import { Observable } from 'rxjs';

var observable = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

Criamos um observável e adicionamos uma mensagem "Meu primeiro observável" usando subscriber.next método disponível dentro do Observable.

Também podemos criar Observable usando o método Observable.create () conforme mostrado abaixo -

testrx.js

import { Observable } from 'rxjs';
var observer = Observable.create(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

Inscrever-se observável

Você pode se inscrever em um observável da seguinte forma -

testrx.js

import { Observable } from 'rxjs';

var observer = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);
observer.subscribe(x => console.log(x));

Quando o observador estiver inscrito, ele iniciará a execução do Observable.

Isso é o que vemos no console do navegador -

Executar observável

Um observável é executado quando é inscrito. Um observador é um objeto com três métodos que são notificados,

next() - Este método enviará valores como um número, string, objeto etc.

complete() - Este método não enviará nenhum valor e indica o observável como concluído.

error() - Este método enviará o erro se houver.

Vamos criar o observável com todas as três notificações e executar o mesmo.

testrx.js

import { Observable } from 'rxjs';
var observer = new Observable(
   function subscribe(subscriber) {
      try {
         subscriber.next("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 complete"));

No código acima, adicionamos os métodos next, complete e error.

try{
   subscriber.next("My First Observable");
   subscriber.next("Testing Observable");
   subscriber.complete();
} catch(e){
   subscriber.error(e);
}

Para executar next, complete e error, temos que chamar o método subscribe conforme mostrado abaixo -

observer.subscribe(x => console.log(x), (e)=>console.log(e), 
   ()=>console.log("Observable is complete"));

O método de erro será invocado apenas se houver um erro.

Esta é a saída vista no navegador -