Heim Web-Frontend js-Tutorial Migrieren von Abonnementrückrufen zu Abonnementargumenten in RxJS

Migrieren von Abonnementrückrufen zu Abonnementargumenten in RxJS

Jan 09, 2025 pm 08:29 PM

Migrando subscribe Callbacks para subscribe arguments no RxJS

Sie, die Person, die rxjs in Ihrem täglichen Leben verwendet, haben das möglicherweise seit Version 6.4 bemerkt. RxJS hat eine veraltete Anmerkung in die Methode subscribe:

eingefügt

@deprecated – Anstatt separate Rückrufargumente zu übergeben, verwenden Sie ein Beobachterargument. Signaturen, die separate Rückrufargumente annehmen, werden in Version 8 entfernt. Details: https://rxjs.dev/deprecations/subscribe-arguments

Die Begründung besteht darin, dass die Verwendung separater Rückrufe zu einer schlechteren Lesbarkeit der Methode führt und es daher vorzuziehen ist, Subscribe-Argumente zu verwenden, die die Eigenschaften zerstören, die die Methode zurückgibt.

Um besser zu verstehen, wie das in der Praxis aussieht, schauen wir uns ein kurzes Beispiel an:

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

Nach dem Login kopieren

Dies wird unsere Basisdatei sein. Die erste Methode gibt Zahlen von 1 bis 5 der Reihe nach mit der Methode .next(); aus, und sobald die Schleife beendet ist, wird das Observable mit der Methode .complete(); vervollständigt

Die zweite Methode erstellt ein Observable, das sofort einen Fehler auslöst

PS: Wenn die Methode .error() aufgerufen wird, stoppt das Observable die Ausgabe von Werten und kann nicht weiterhin Werte über .next() ausgeben oder mit .complete() vervollständigt werden.

Und kommen wir zum Punkt.

Wir werden als erstes Beispiel die Art und Weise verwenden, die derzeit veraltet ist, und dann werde ich zeigen, wie man das beobachtbare Argument verwendet.


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

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

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

Nach dem Login kopieren
Beachten Sie, dass es sich um etwas Sichtbareres handelt, da es sich um ein Beispiel handelt. Gleichzeitig müssen wir jedoch die Reihenfolge jedes Rückrufs kennen (nächster, Fehler und abgeschlossener Rückruf).

Aber jetzt kommen wir zur Verwendung von Argumentobservablen:


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

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

dataWithError()
    .subscribe({ error: (error) => console.error({ error })
    });
Nach dem Login kopieren
Von diesem Punkt an haben wir mit dem Argument Observables eine klarere Vorstellung davon, was wir innerhalb der subscribe-Methode verwenden, und müssen keine Rückrufe oder Argumente deklarieren, die wir nicht verwenden werden.

Die Migration ist einfach durchzuführen und hinterlässt Ihren Code ohne veraltete Meldungen für diese API.

Das obige ist der detaillierte Inhalt vonMigrieren von Abonnementrückrufen zu Abonnementargumenten in RxJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ersetzen Sie Stringzeichen in JavaScript Ersetzen Sie Stringzeichen in JavaScript Mar 11, 2025 am 12:07 AM

Ersetzen Sie Stringzeichen in JavaScript

JQuery überprüfen, ob das Datum gültig ist JQuery überprüfen, ob das Datum gültig ist Mar 01, 2025 am 08:51 AM

JQuery überprüfen, ob das Datum gültig ist

JQuery Get Element Polsterung/Rand JQuery Get Element Polsterung/Rand Mar 01, 2025 am 08:53 AM

JQuery Get Element Polsterung/Rand

10 JQuery Accords Registerkarten 10 JQuery Accords Registerkarten Mar 01, 2025 am 01:34 AM

10 JQuery Accords Registerkarten

10 lohnt 10 lohnt Mar 01, 2025 am 01:29 AM

10 lohnt

HTTP-Debugging mit Knoten und HTTP-Konsole HTTP-Debugging mit Knoten und HTTP-Konsole Mar 01, 2025 am 01:37 AM

HTTP-Debugging mit Knoten und HTTP-Konsole

JQuery fügen Sie Scrollbar zu Div hinzu JQuery fügen Sie Scrollbar zu Div hinzu Mar 01, 2025 am 01:30 AM

JQuery fügen Sie Scrollbar zu Div hinzu

Benutzerdefinierte Google -Search -API -Setup -Tutorial Benutzerdefinierte Google -Search -API -Setup -Tutorial Mar 04, 2025 am 01:06 AM

Benutzerdefinierte Google -Search -API -Setup -Tutorial

See all articles