DEV Community

Bruno Donatelli
Bruno Donatelli

Posted on • Edited on

2 1 1 1 1

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.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more