You Don't Know AbortController

Viele Entwickler mögen denken, sie verstünden AbortController, aber seine Fähigkeiten gehen weit über die Grundlagen hinaus. Von der Abbrechen von fetch-Anfragen bis zur Verwaltung von Event-Listenern und React-Hooks.

Wisst ihr wirklich, wie leistungsfähig AbortController ist? Lasst uns sehen:

Abbrechen von fetch-Anfragen mit AbortController

Die Verwendung von AbortController mit fetch ist natürlich die häufigste Anwendung.

Hier ist ein Beispiel, das demonstriert, wie AbortController verwendet werden kann, um abbrechbare fetch-Anfragen zu erstellen:

fetchButton.onclick = async () => {
  const controller = new AbortController();
  // Add a cancel button
  abortButton.onclick = () => controller.abort();
  try {
    const response = await fetch('/json', { signal: controller.signal });
    const data = await response.json();
    // Perform business logic here
  } catch (error) {
    const isUserAbort = error.name === 'AbortError';
    // AbortError is thrown when the request is canceled using AbortController
  }
};

Das obige Beispiel zeigt etwas, das vor der Einführung von AbortController unmöglich war: die Möglichkeit, Netzwerkanfragen programmatisch abzubrechen. Wenn abgebrochen, stoppt der Browser den fetch-Vorgang und spart Netzwerkbandbreite. Wichtig ist, dass die Stornierung nicht vom Benutzer initiiert werden muss.

Das controller.signal stellt ein AbortSignal-Objekt bereit, das die Kommunikation mit asynchronen Operationen wie fetch ermöglicht und es ihnen ermöglicht, abgebrochen zu werden.

Um mehrere Signale zu einem einzigen Signal zu kombinieren, können Sie AbortSignal.any() verwenden. Hier ist, wie:

try {
  const controller = new AbortController();
  const timeoutSignal = AbortSignal.timeout(5000);
  const response = await fetch(url, {
    // Abort fetch if any of the signals are triggered
    signal: AbortSignal.any([controller.signal, timeoutSignal]),
  });
  const data = await response.json();
} catch (error) {
  if (error.name === 'AbortError') {
    // Notify the user of cancellation
  } else if (error.name === 'TimeoutError') {
    // Notify the user of timeout
  } else {
    // Handle other errors, like network issues
    console.error(`Type: ${error.name}, Message: ${error.message}`);
  }
}

Unterschiede zwischen AbortController und AbortSignal

• AbortController: Wird verwendet, um zugehörige Signale explizit über controller.abort() abzubrechen.
• AbortSignal: Repräsentiert das Signalobjekt; es kann nichts direkt abbrechen, sondern kommuniziert seinen abgebrochenen Zustand.

Für AbortSignal können Sie:

• Überprüfen Sie, ob es mit signal.aborted abgebrochen wurde.
• Hören Sie auf das abort-Ereignis:

if (signal.aborted) {
}
signal.addEventListener('abort', () => {});

Wenn eine Anfrage mit AbortController abgebrochen wird, verarbeitet der Server sie nicht und sendet keine Antwort, wodurch Bandbreite gespart und die clientseitige Leistung durch Reduzierung gleichzeitiger Verbindungen verbessert wird.

Häufige Anwendungsfälle für AbortController

Abbrechen von WebSocket-Verbindungen

Ältere APIs wie WebSocket unterstützen AbortSignal nicht nativ. Stattdessen können Sie die Stornierung wie folgt implementieren:

function abortableSocket(url, signal) {
  const socket = new WebSocket(url);
  if (signal.aborted) {
    socket.close();
    // Abort immediately if already canceled
  }
  signal.addEventListener('abort', () => socket.close());
  return socket;
}

Hinweis: Wenn AbortSignal bereits abgebrochen wurde, löst es das abort-Ereignis nicht aus, daher müssen Sie diesen Fall im Voraus überprüfen und behandeln.

Entfernen von Event-Listenern

Traditionell erfordert das Entfernen von Event-Listenern das Übergeben derselben Funktionsreferenz:

window.addEventListener('resize', () => doSomething());
window.removeEventListener('resize', () => doSomething()); // This won’t work

Mit AbortController wird dies einfacher:

const controller = new AbortController();
const { signal } = controller;
window.addEventListener('resize', () => doSomething(), { signal });
// Remove the event listener by calling abort()
controller.abort();

Für ältere Browser sollten Sie ein Polyfill hinzufügen, um AbortController zu unterstützen.

Verwalten asynchroner Aufgaben in React Hooks

In React können Effekte unbeabsichtigt parallel ausgeführt werden, wenn die Komponente aktualisiert wird, bevor eine vorherige asynchrone Aufgabe abgeschlossen ist:

function FooComponent({ something }) {
  useEffect(async () => {
    const data = await fetch(url + something);
    // Handle the data
  }, [something]);
  return <>...</>;
}

Um solche Probleme zu vermeiden, verwenden Sie AbortController, um vorherige Aufgaben abzubrechen:

function FooComponent({ something }) {
  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;
    (async () => {
      const data = await fetch(url + something, { signal });
      // Process the response
    })();
    return () => controller.abort();
  }, [something]);
  return <>...</>;
}

Verwenden von AbortController in Node.js

Das moderne Node.js enthält eine setTimeout-Implementierung, die mit AbortController kompatibel ist:

const { setTimeout: setTimeoutPromise } = require('node:timers/promises');
const controller = new AbortController();
const { signal } = controller;

setTimeoutPromise(1000, 'foobar', { signal })
  .then(console.log)
  .catch((error) => {
    if (error.name === 'AbortError') console.log('Timeout was aborted');
  });

controller.abort();

Im Gegensatz zu setTimeout im Browser akzeptiert diese Implementierung keinen Callback; verwenden Sie stattdessen .then() oder await.

TaskController für erweiterte Planung

Browser bewegen sich in Richtung scheduler.postTask() für die Aufgabenpriorisierung, wobei TaskController AbortController erweitert. Sie können es verwenden, um Aufgaben abzubrechen und ihre Priorität dynamisch anzupassen:

const taskController = new TaskController();
scheduler
  .postTask(() => console.log('Executing task'), { signal: taskController.signal })
  .then((result) => console.log(result))
  .catch((error) => console.error('Error:', error));

taskController.abort();

Wenn keine Prioritätskontrolle erforderlich ist, können Sie stattdessen einfach AbortController verwenden.

Fazit

AbortController ist ein wesentliches Werkzeug in der modernen JavaScript-Entwicklung und bietet eine standardisierte Möglichkeit, asynchrone Aufgaben zu verwalten und abzubrechen.

Seine Integration in Browser- und Node.js-Umgebungen unterstreicht seine Vielseitigkeit und Bedeutung.

Wenn Sie AbortController nicht kennen, ist es jetzt an der Zeit, seine vollen Fähigkeiten zu nutzen und ihn zu einem Eckpfeiler Ihres asynchronen Programmier-Toolkits zu machen.

---

Wir sind Leapcell, Ihre erste Wahl für die Bereitstellung von Node.js-Projekten in der Cloud.

Leapcell ist die Serverless-Plattform der nächsten Generation für Webhosting, asynchrone Aufgaben und Redis:

Multi-Sprachen Unterstützung

• Entwickeln Sie mit Node.js, Python, Go oder Rust.

Unbegrenzt Projekte kostenlos bereitstellen

• Zahlen Sie nur für die Nutzung – keine Anfragen, keine Gebühren.

Unschlagbare Kosteneffizienz

• Pay-as-you-go ohne Leerlaufgebühren.
• Beispiel: 25 US-Dollar unterstützen 6,94 Millionen Anfragen bei einer durchschnittlichen Antwortzeit von 60 ms.

Optimierte Entwicklererfahrung

• Intuitive Benutzeroberfläche für mühelose Einrichtung.
• Vollautomatische CI/CD-Pipelines und GitOps-Integration.
• Echtzeitmetriken und -protokollierung für umsetzbare Erkenntnisse.

Mühelose Skalierbarkeit und hohe Leistung

• Automatische Skalierung zur einfachen Bewältigung hoher Parallelität.
• Null Betriebsaufwand – konzentrieren Sie sich einfach auf den Aufbau.

Erfahren Sie mehr in der Dokumentation!

Folgen Sie uns auf X: @LeapcellHQ