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.

@Component({
    selector: 'componente-maneiro',
    template: `
        <h1>{{tituloPagina | async}}</h1>
    `
    ...
})
export class ComponenteManeiro implements OnInit {
    private tituloPagina: Observable<string>;
 
    constructor(private httpService: HttpClient) {}
 
    ngOninit(): void {
        this.tituloPagina = this.httpService.get('alguma-url.com')
    }
}

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

@Component({
    selector: 'componente-insano',
    template: `
        <ul>
            <li *ngFor="let item of todoList | async">{{item.name}}</li>
        </ul>
    `
    ...
})
export class ComponenteInsano implements OnInit {
    private todoList: Observable<string>;
 
    constructor(private httpService: HttpClient) {}
 
    ngOninit(): void {
        this.todoList = this.httpService.get('outra-url.com')
    }
}

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.

@Component({...})
export class ComponenteManeiro{
    private unsubscribe = new Subject<void>;
}

Este Subject está sendo criado para guardar nossos subscription.

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

@Component({...})
export class ComponenteManeiro implements OnInit {
    private unsubscribe = new Subject<void>;
    
    constructor(private httpService: HttpClient) {}
 
    ngOninit(): void {
        this.httpService.get('alguma-url.com')
                .pipe(takeUntil(this.unsubscribe))
                .subscribe((values) => {
                    // Faz alguma coisa com os dados
         })
 
        this.httpService.get('outra-url.com')
                .pipe(takeUntil(this.unsubscribe))
                .subscribe((values) => {
                    // Faz alguma coisa com os dados
         })
    }
}

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.

@Component({...})
export class ComponenteManeiro implements OnInit, OnDestroy {
    private unsubscribe = new Subject<void>;
 
    constructor(private httpService: HttpClient) {}
 
    ngOninit(): void {
        this.httpService.get('alguma-url.com')
                .pipe(takeUntil(this.unsubscribe))
                .subscribe((values) => {
                    // Faz alguma coisa com os dados
                })
 
        this.httpService.get('outra-url.com')
                .pipe(takeUntil(this.unsubscribe))
                .subscribe((values) => {
                    // Faz alguma coisa com os dados
                })
    }
 
    ngOnDestroy(): void {
        this.unsubscribe.next();
        this.unsubscribe.complete();
    }
}

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.