Logo

dev-resources.site

for different kinds of informations.

Migrando subscribe Callbacks para subscribe arguments no RxJS

Published at
1/9/2025
Categories
javascript
braziliandevs
rxjs
webdev
Author
brunoredes
Author
10 person written this
brunoredes
open
Migrando subscribe Callbacks para subscribe arguments no RxJS

Você, pessoa que usa rxjs no seu dia a dia, já deve ter reparado que desde a versão 6.4. o RxJS colocou uma anotação de deprecated no método subscribe:

@deprecated — Instead of passing separate callback arguments, use an observer argument. Signatures taking separate callback arguments will be removed in v8. Details: https://rxjs.dev/deprecations/subscribe-arguments

A justificativa é que usar callbacks separadas gera uma pior leitura do método. Assim, é preferível usar argumentos subscribe fazendo a desestruturação das propriedades que o método retorna.

Para entendermos melhor na prática, vamos a um exemplo rápido:

data.js

import { Observable } from "rxjs";

/**
 * Cria um observable que emite valores numéricos de 1 até 5, e então se finaliza.
 *
 * @returns {Observable<number>} Um observable que emite números de 1 até 5 em sequência.
 */
export const data = () => {
  return new Observable((observer) => {
    for (let i = 1; i <= 5; i++) {
      observer.next(i);
    }

    observer.complete();
  });
};

/**
 * Cria um observable que emite um error imediatamente
 *
 * @returns {Observable<never>} Um observable que emite um erro.
 */
export const dataWithError = () => {
  return new Observable((observer) => {
    observer.error("Aconteceu um erro!");
  });
};

Enter fullscreen mode Exit fullscreen mode

Este será o nosso arquivo base. O primeiro método emite, em sequência, números de 1 a 5 com o método .next(); assim que o loop é finalizado, o observable é completado com o método .complete();.

O segundo método cria um observable que emite um erro imediatamente

PS: quando o método .error() é chamado, o observable para de emitir valores e não pode continuar emitindo valores via .next() ou ser completado com o .complete().

A partir das informações acima, passamos ao ponto principal.

Usarei como primeiro exemplo a maneira que atualmente está depreciada; em seguida, vou mostrar como utilizar o argument observable.

import { data, dataWithError } from "./data.js";

data().subscribe(
  (value) => console.log(value),
  (error) => {},
  () => {
    console.log("completou");
  }
);

dataWithError().subscribe(
  () => {},
  (error) => {
    console.error({ error });
  }
);

Enter fullscreen mode Exit fullscreen mode

Observe que, por ser um exemplo, é algo mais visível, mas que, ao mesmo tempo, é necessário saber a ordem de cada callback (next, error e complete).

Posteriormente, vamos analisar a forma de utilização dos argument observables:

import { data, dataWithError } from "./data.js";

data().subscribe({
  next: (data) => console.log(data),
  complete: () => console.log("completou"),
});

dataWithError()
    .subscribe({ error: (error) => console.error({ error })
    });
Enter fullscreen mode Exit fullscreen mode

A partir deste ponto com os argument observables, temos uma leitura mais limpa do que estamos usando dentro do método subscribe. Dessa forma, não é necessário declarar callbacks ou argumentos que não serão utilizados.

É uma migração fácil de ser realizada, e deixará seu código sem mensagens de depreciação dessa API.

braziliandevs Article's
30 articles in total
Favicon
Aumente seu leque de ferramentas no desenvolvimento com um exemplo prático usando MoSCoW
Favicon
Estruturas de Dados: Heap
Favicon
Um ano de Magalu Cloud, e aí?
Favicon
Learn JQuery
Favicon
Se preferimos composição, então por que os frameworks usam herança?
Favicon
[Boost]
Favicon
Idempotência, Potência e Métodos HTTP em REST
Favicon
Migrando subscribe Callbacks para subscribe arguments no RxJS
Favicon
Selamat Datang
Favicon
Como realizar o Deploy de Projetos Web em uma VPS
Favicon
🙅🏾‍♂️ Flexbox Sem Frescura
Favicon
Bulma: CSS Fácil, Rápido e menos pior que Bootstrap e Tailwind
Favicon
Github Copilot de graça!
Favicon
🔰Git e Github: Comandos basicos do git
Favicon
Segmentações de dados e Tabelas Dinâmicas Recomendadas
Favicon
OBS Studio como baixar e Instalar
Favicon
Curso gratuito de Typescript 2025 - Aula 002
Favicon
Junior Portare é professor de Marketing e Vendas
Favicon
O que é Threads?: Não é o Twitter da Meta
Favicon
BLoC - Mais que um package, um padrão
Favicon
Como usar WebSockets em Flask (How to use WebSockets in Flask)
Favicon
Porque você deve melhorar sua capacidade de comunicação para trabalhar com tecnologia
Favicon
Normalização dos Bancos de Dados Relacionais (Handbook)
Favicon
Estruturas de Dados: Árvores
Favicon
Curso gratuito de Typescript 2025
Favicon
Um resumo do meu 2024
Favicon
De uma página para vários components
Favicon
Artigos sobre CSS que explodiram minha cabeça em 2024
Favicon
Validação e Sanitização em Aplicações Web
Favicon
Fundamentos da Segurança em Aplicações Web

Featured ones: