RxJS에서 인수를 구독하기 위해 구독 콜백 마이그레이션

rxjs를 일상생활에서 사용하시는 분들은 6.4 버전부터 눈치채셨을 겁니다. RxJS는 subscribe:

메소드에 더 이상 사용되지 않는 주석을 배치했습니다.

@deprecated — 별도의 콜백 인수를 전달하는 대신 관찰자 인수를 사용하세요. 별도의 콜백 인수를 사용하는 서명은 v8에서 제거됩니다. 세부 정보: https://rxjs.dev/deprecations/subscribe-arguments

별도의 콜백을 사용하면 메소드 읽기가 더 나빠지므로 구독 인수를 사용하여 메소드가 반환하는 속성을 분해하는 것이 좋습니다.

실제로 어떻게 보이는지 더 잘 이해하기 위해 간단한 예를 살펴보겠습니다.

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

이것이 기본 파일이 됩니다. 첫 번째 방법은 .next(); 메서드를 사용하여 1부터 5까지의 숫자를 순차적으로 출력하고 루프가 완료되자마자 Observable이 .complete() 메서드로 완료됩니다.

두 번째 방법은 즉시 오류를 발생시키는 Observable을 생성합니다

PS: .error() 메서드가 호출되면 Observable은 값 방출을 중지하고 .next()를 통해 값 방출을 계속하거나 .complete()로 완료할 수 없습니다.

본론으로 들어가겠습니다.

현재 더 이상 사용되지 않는 방식을 첫 번째 예로 사용한 다음 Observable 인수를 사용하는 방법을 보여 드리겠습니다.

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

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

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

예제이기 때문에 더 눈에 띄지만 동시에 각 콜백의 순서(다음, 오류, 완료)를 알아야 합니다.

그렇다면 인수 Observable을 사용하는 방법을 살펴보겠습니다.

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

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

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

이 시점부터 observables 인수를 사용하면 사용하지 않을 콜백이나 인수를 선언할 필요 없이 구독 메소드 내에서 사용 중인 내용을 더 명확하게 읽을 수 있습니다.

쉽게 마이그레이션할 수 있으며 이 API에 대한 지원 중단 메시지 없이 코드가 그대로 유지됩니다.

위 내용은 RxJS에서 인수를 구독하기 위해 구독 콜백 마이그레이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!