Wie beende ich Rückruffunktionen in Async/warte elegant?

Die Rückruffunktion in Async/Wartee ordnungsgemäß beenden

Wie man sicher aus einer Rückruffunktion mit ungewisse Ausführungszeit beendet, ist eine häufige Herausforderung, wenn Async/Assoit für asynchrone Operationen verwendet wird. Dieser Artikel enthält ein Szenario, um zu demonstrieren, wie der Ausgang der Rückruffunktion in der async/wartenden Umgebung effektiv gesteuert werden kann.

Problem: Der Code verwendet MutationObserver, um Änderungen in den Schaltflächeneigenschaften anzuhören. Wenn sich die Eigenschaften ändern, müssen Sie die asynchrone Funktion verlassen. Das traditionelle Schreiben von Versprechen ist leicht zu implementieren, aber wenn der Code komplex ist, verringert das verschachtelte Versprechen die Lesbarkeit und Wartbarkeit. Ziel ist es, den Code in Async/Warted -Stil umzuschreiben und gleichzeitig das Problem zu lösen, wie die asynchrone Funktion in der Rückruffunktion sicher beendet wird.

Beispielcode:

 // Verwenden Sie die traditionelle Schreibmethode von Promise const a = (): Versprechen<void> => {
  Neues Versprechen zurückgeben ((Resolve) => {
    const callback = (Mutationen: mutationRecord []) => {
      // Hören Sie sich die Schaltflächenattributänderungen an und beenden Sie die Funktion Resolve () hier.
    };
    const beobserver = neuer mutationObserver (Rückruf);
    Obserse.observe (Buttonel, {Attribute: true});

    // Rufen Sie die Versprechungsfunktion auf, lösen Sie die Schaltfläche Klicken Sie nach dem Erfolg auf und hören
      buttonel.click ();
    });
  });
};

// Async/wartet, um const b = async () zu schreiben: Versprechen<void> => {
  const callback = (Mutationen: mutationRecord []) => {
    // Hören Sie sich die Änderungen in den Schaltflächenattributen an, wie Sie die Funktion hier beenden?
  };
  const beobserver = neuer mutationObserver (Rückruf);
  Obserse.observe (Buttonel, {Attribute: true});

  // Rufen Sie die Versprechungsfunktion auf, lösen Sie die Schaltfläche Klicken Sie nach dem Erfolg auf und hören Sie dann auf Eigenschaften Änderungen auf p ().
  buttonel.click ();
};</void></void>

Lösung:

Um dieselbe Funktion zu implementieren wie die a -Funktion in Async/Auseit, können Sie Promise.withResolvers() verwenden. Diese Methode gibt ein Objekt zurück, das das Versprechen und die Auflösungsfunktionen enthält.

Verbesserter Code:

 const b = async (): Versprechen<void> => {
  const {versprechen, Resolve} = Versprechen.Withresolvers<void> ();

  const callback = (Mutationen: mutationRecord []) => {
    lösen(); // rufen Sie Resolve () in der Rückruffunktion an, um das Versprechen zu lösen
  };
  const beobserver = neuer mutationObserver (Rückruf);
  Obserse.observe (Buttonel, {Attribute: true});

  warte p ();
  buttonel.click ();
  auf Versprechen warten; // Warten Sie auf das Versprechen, dies zu lösen};</void></void>

Kompatibilitätsbeschreibung:

Promise.withResolvers() befindet sich derzeit in der Vorschlagsphase und nicht alle Browser werden nativ unterstützt. Um die Kompatibilität zu gewährleisten, können Polyfüllungen wie core-js erforderlich sein. In ähnlicher Weise müssen TypeScript -Benutzer auf Version 5.4 oder höher aktualisieren und lib so konfigurieren, dass esnext in tsconfig.json einbezieht.

Mit Promise.withResolvers() können Sie resolve() in der Rückruffunktion aufrufen, um das Versprechen zu lösen, wodurch der Ausgangsprozess der Async/Awit -Funktion effektiv kontrolliert wird, um eine komplexe Verhinderung des Versprechens zu vermeiden und die Lesbarkeit und Wartbarkeit des Codes zu verbessern.

Das obige ist der detaillierte Inhalt vonWie beende ich Rückruffunktionen in Async/warte elegant?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!