Jornada Frontend

Lidando com Unsubscribes no Observable do Angular

Fala stakers!
Hoje vamos ver onde precisamos fazer o unsubscribes do Observable.

Falando de Angular, sabemos que ele é cheio dos Observables, mas existe um mecanismo onde ele faz o unsubscribe do Obervable quando o componente é destruído?

Async Pipe

|async, o pipe asincrono automaticamente faz o unsubscribe depois que o componente é destruído.

takeUntil

TakeUntil pode ser chamado no .pipe(), antes de fazer o subscribe. Com esse método, podemos adicionar o subscription ao Subject. Se tivermos alguns subscription, temos a possibilidade de fazer o unsubscribe com o ngOnDestroy junto com o .next() e o .complete().

Observables no Template HTML com Async Pipe

O Angular oferece várias maneiras de lidar com Observables no HTML via async pipe (| async). O melhor de tudo é como vimos no começo do post, desta forma ele faz o processo de unsubscribe sozinho e não precisamos colocar a mão nisso.Você pode usar o async pipe para valores únicos.

Ou podemos usar para valores que são Objetos ou Arrays.

Neste componente, não precisamos usar o ngOnDestroy, pois ele automaticamente faz o unsubscribe das inscrições durante o processo de destruição do componente.

Observables com o método takeUntil

Vamos imaginar que estamos fazendo várias requisições AJAX via HttpCliente. Não vamos fazer isso passando ele diretamente no HTML. Então o async pipe não é ideal para essa situação.

Agora temos vários subscribes!

E como diabos vamos fazer o unsubscribe de todos eles de uma vez, ao invés de fazer um a um? Primeiramente devemos fazer o Subject no componente.

Este Subject está sendo criado para guardar nossos subscription.

Vamos fazer algumas inscrições no nosso ngOnInit com o HttpClient.

Como podemos ver após o get(), tem um pipe(takeUntil(this.unsubscribe)). Com o takeUntil, nós adicionamos uma referência do Observable ao unsubscribe Subject. O Subject segura a referência de ambos os Observables durante o processo de inscrição.

O ngOnDestroy() é chamado antes do componente ser destruído.

O next() vai passar um valor vazio para o subscription. Com o complete(), nós dizemos ao subscrition que já não precisa ficar ouvindo novos valores.

Agora não precisamos ficar fazendo vários requests via HttpClient, podemos parar todos eles de uma vez só.

Conclusão

Estás duas estratégias são usadas em muitos casos e situações, o grande lance é usa-las em nossas aplicações Angular.

Caso você saiba mais maneiras de lidar com os Observables, deixa nos comentários e vamos aprender juntos!

Gostou? Quer aprender mais de angular? Então veja aqui nosso Curso de Angular.

Aprenda mais de Angular em nossas postagens ou no Youtube.

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Fruto de mais de 7 anos estudando e trabalhando com Front-end, a "Jornada Front-end - O Guia Definitivo" é um manual completo para todos que querem subir em suas carreiras do zero ou subir do seu nível atual.

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Share This