Você já se perguntou por que o subscribe no eu VSCode aparece riscado?

Se você tem trabalhado com Angular e RxJS, é bem possível que tenha notado algo curioso no seu editor de código: aquele famoso método subscribe riscado, como se fosse algo que você não deveria mais usar. Mas calma, o subscribe não está totalmente proibido — ele foi atualizado para se alinhar às práticas modernas de programação e melhorar a legibilidade do código.

Vamos entender o motivo disso e como lidar com essas mudanças, dando exemplos práticos de requisições HTTP no Angular.

---

Por que o subscribe aparece riscado?

O método subscribe não foi removido, mas alguns dos seus formatos foram marcados como deprecados. Isso significa que eles ainda funcionam, mas não são mais recomendados. No futuro, esses formatos podem ser completamente removidos, então é uma boa ideia já começar a usar as novas práticas.

Antes

O principal motivo para isso é que as assinaturas antigas com múltiplos argumentos eram difíceis de entender e mantinham o código suscetível a erros. Por exemplo:

// Forma antiga (deprecada)
observable.subscribe(
  (data) => console.log(data),     // Callback para os dados
  (error) => console.error(error), // Callback para erros
  () => console.log('Completo!')   // Callback para conclusão
);

Isso pode se tornar confuso rapidamente, especialmente se você usar funções com nomes pouco claros. Imagine algo assim:

observable.subscribe(doThis, doThat, doSomethingElse);

Sem contexto, você não faz ideia do que cada função está fazendo. Isso torna o código menos legível e mais difícil de dar manutenção.

---

A nova forma recomendada de usar subscribe

Agora, em vez de usar múltiplos argumentos, você deve passar um Observer, que é um objeto contendo os métodos next, error e complete. Isso deixa o código mais claro e explícito.

// Nova forma recomendada
observable.subscribe({
  next: (data) => console.log('Dados:', data),
  error: (error) => console.error('Erro:', error),
  complete: () => console.log('Requisição completa!'),
});

Com essa abordagem, fica claro para qualquer pessoa que ler o código qual é a função de cada parte.

---

Exemplo prático: Requisição HTTP no Angular

Vamos imaginar um caso prático em que você faz uma requisição HTTP para buscar dados de um servidor.

Forma Antiga (Deprecada):

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

ngOnInit() {
  this.http.get('https://api.exemplo.com/dados').subscribe(
    (data) => console.log('Dados recebidos:', data), // Callback para os dados
    (error) => console.error('Erro na requisição:', error), // Callback para erros
    () => console.log('Requisição concluída') // Callback para conclusão
  );
}

Apesar de funcional, essa forma não é mais recomendada. Veja como ela pode ser modernizada.

Forma Atualizada (Recomendada):

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

ngOnInit() {
  this.http.get('https://api.exemplo.com/dados').subscribe({
    next: (data) => console.log('Dados recebidos:', data),
    error: (error) => console.error('Erro na requisição:', error),
    complete: () => console.log('Requisição concluída'),
  });
}

Agora está muito mais claro que estamos tratando três cenários distintos: o recebimento de dados (next), a ocorrência de erros (error) e a conclusão do fluxo (complete).

---

Melhorando com o uso de pipe e operadores RxJS

Se você precisar manipular os dados ou tratar erros antes de consumi-los, pode usar o método pipe junto com operadores do RxJS. Isso traz ainda mais controle e modularidade ao seu código.

Exemplo com pipe:

import { HttpClient } from '@angular/common/http';
import { catchError, finalize, map } from 'rxjs/operators';
import { of } from 'rxjs';

constructor(private http: HttpClient) {}

ngOnInit() {
  this.http
    .get('https://api.exemplo.com/dados')
    .pipe(
      map((data: any) => data.items), // Transformar os dados
      catchError((error) => {
        console.error('Erro capturado:', error);
        return of([]); // Retornar um observable vazio em caso de erro
      }),
      finalize(() => console.log('Requisição finalizada')) // Ação ao concluir
    )
    .subscribe({
      next: (items) => console.log('Itens recebidos:', items),
      error: (error) => console.error('Erro não tratado:', error), // Só é chamado se o erro não for capturado
      complete: () => console.log('Processo completo!'),
    });
}

Com o pipe, você consegue:

• Modificar os dados antes de exibi-los (ex.: map);
• Capturar e tratar erros (ex.: catchError);
• Executar ações ao final de tudo (ex.: finalize).

---

Por que vale a pena migrar para a nova abordagem?

• Legibilidade: Seu código fica mais organizado e fácil de entender.
• Manutenção: Com as responsabilidades claramente separadas, é mais simples corrigir ou alterar funcionalidades.
• Alinhamento com padrões modernos: Usar a abordagem recomendada garante que seu código esteja atualizado e menos propenso a quebras em futuras atualizações do Angular e RxJS.

---

Conclusão

Se você viu o subscribe riscado no VSCode, não é um erro, mas sim um aviso de que é hora de atualizar sua abordagem. Migrar para o uso de Observers e operadores como pipe traz não apenas compatibilidade futura, mas também código mais claro, modular e fácil de manter.

Dica Extra: Refatore seu código com calma e, se possível, aproveite para estudar mais sobre operadores RxJS como map, catchError, tap e finalize. Eles são seus aliados no trabalho com fluxos assíncronos!
Dicas de leitura sobre observer e seu design patterns