DEV Community

Levy Henrique Alves Nunes
Levy Henrique Alves Nunes

Posted on

Primeiros Passos com Observáveis

Os observáveis são uma forma poderosa de lidar com sequências assíncronas de eventos, amplamente utilizados em frameworks e bibliotecas como o Angular e a biblioteca RxJS. Ao compreender os observáveis, você pode aproveitar uma abordagem reativa para lidar com dados assíncronos, como chamadas HTTP, entradas de usuário, entre outros.

Vamos dar uma olhada em como criar um observável, inscrever-se para escutar as mudanças e, finalmente, como se desinscrever.

1. Criando um Observável
Para criar um observável, primeiro você precisará da biblioteca RxJS. Se ainda não a tem instalada, faça-o via npm ou yarn:

npm install rxjs
Enter fullscreen mode Exit fullscreen mode

Agora, você pode criar um observável:

import { Observable } from 'rxjs';

const meuObservavel = new Observable(subscriber => {
  subscriber.next('Olá');
  subscriber.next('Mundo');
  setTimeout(() => {
    subscriber.next('com delay!');
    subscriber.complete();
  }, 2000);
});
Enter fullscreen mode Exit fullscreen mode

Neste exemplo, o observável emitirá "Olá", "Mundo" e, após 2 segundos, "com delay!" e, em seguida, será completado.

2. Inscrevendo-se em um Observável
Para escutar as mudanças ou os eventos emitidos por um observável, você precisa se inscrever nele:

const inscricao = meuObservavel.subscribe(
  valor => console.log(valor), // função que lidará com os valores emitidos
  erro => console.error(`Erro capturado: ${erro}`), // função que lidará com erros
  () => console.log('Observável completado!') // função chamada quando o observável estiver completo
);
Enter fullscreen mode Exit fullscreen mode

Ao rodar este código, você verá as mensagens no console conforme os valores forem emitidos.

3. Desinscrevendo-se de um Observável
É vital se desinscrever de observáveis para evitar vazamentos de memória ou comportamentos inesperados. A chamada de subscribe retorna uma inscrição, que você pode usar para se desinscrever:

inscricao.unsubscribe();
Enter fullscreen mode Exit fullscreen mode

Normalmente, você se desinscreverá em situações como:

Quando um componente em frameworks como Angular é destruído.
Quando você sabe que não há mais nenhum valor útil sendo emitido.

Antes de se inscrever novamente no mesmo observável.
E é isso! Com estes primeiros passos, você está no caminho certo para explorar o mundo dos observáveis e da programação reativa. Os observáveis são uma ferramenta incrivelmente poderosa e, à medida que você se aprofunda neles, descobrirá operadores e padrões avançados que podem transformar a maneira como você lida com eventos assíncronos no seu código.

Top comments (0)