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!"); }); }; 

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 }); } ); 

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 }) }); 

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.