Kennen Sie AbortController wirklich?

Viele Entwickler denken vielleicht, dass sie AbortController verstehen, aber seine Fähigkeiten gehen weit über die Grundlagen hinaus. Vom Abbrechen von Abrufanfragen bis hin zur Verwaltung von Event-Listenern und React-Hooks.

Wissen Sie wirklich, wie leistungsfähig AbortController ist? Mal sehen:

Abrufanforderungen mit AbortController abbrechen

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

Hier ist ein Beispiel, das zeigt, wie AbortController verwendet werden kann, um abbrechbare Abrufanforderungen 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 programmgesteuert abzubrechen. Bei Abbruch stoppt der Browser den Abruf und spart so Netzwerkbandbreite. Wichtig ist, dass die Stornierung nicht vom Benutzer initiiert werden muss.

controller.signal stellt ein AbortSignal-Objekt bereit, das die Kommunikation mit asynchronen Vorgängen wie Fetch ermöglicht und deren Abbruch ermöglicht.

Um mehrere Signale zu einem einzigen Signal zu kombinieren, können Sie AbortSignal.any() verwenden. So geht's:

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: Stellt das Signalobjekt dar; Es kann nichts direkt abbrechen, teilt aber seinen abgebrochenen Zustand mit.

Für AbortSignal können Sie:

• Überprüfen Sie mit signal.aborted, ob der Vorgang abgebrochen wurde.
• Achten Sie auf das Abbruchereignis:

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 die Reduzierung gleichzeitiger Verbindungen verbessert wird.

Häufige Anwendungsfälle für AbortController

WebSocket-Verbindungen abbrechen

Ä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 ist, wird das Abbruchereignis nicht ausgelöst, daher müssen Sie diesen Fall im Voraus prüfen und bearbeiten.

Entfernen von Ereignis-Listenern

Traditionell erfordert das Entfernen von Ereignis-Listenern die Übergabe genau 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();

Erwägen Sie bei älteren Browsern das Hinzufügen einer Polyfüllung zur Unterstützung von AbortController.

Asynchrone Aufgaben in React Hooks verwalten

In React können Effekte versehentlich 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:

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

Verwenden von AbortController in Node.js

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

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

Im Gegensatz zum Browser setTimeout akzeptiert diese Implementierung keinen Rückruf. Verwenden Sie stattdessen .then() oderawait.

TaskController für erweiterte Planung

Browser bewegen sich zur Aufgabenpriorisierung in Richtung Scheduler.postTask(), wobei TaskController AbortController erweitert. Sie können damit Aufgaben abbrechen und deren Priorität dynamisch anpassen:

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

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

Abschluss

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

Die Integration sowohl in Browser- als auch in 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 es zu einem Eckpfeiler Ihres asynchronen Programmier-Toolkits zu machen.

Wir sind Kennen Sie AbortController wirklich?, Ihre erste Wahl für die Bereitstellung von Node.js-Projekten in der Cloud.

Kennen Sie AbortController wirklich? ist die serverlose Plattform der nächsten Generation für Webhosting, Async-Aufgaben und Redis:

Mehrsprachige Unterstützung

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

Stellen Sie unbegrenzt viele Projekte kostenlos bereit

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

Unschlagbare Kosteneffizienz

• Pay-as-you-go ohne Leerlaufgebühren.
• Beispiel: 25 $ 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 problemlosen Bewältigung hoher Parallelität.
• Kein Betriebsaufwand – konzentrieren Sie sich nur auf das Bauen.

Erfahren Sie mehr in der Dokumentation!

Folgen Sie uns auf X: @Kennen Sie AbortController wirklich?HQ

Lesen Sie auf unserem Blog

Das obige ist der detaillierte Inhalt vonKennen Sie AbortController wirklich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!