JavaScript AbortController: Muster zum Abbrechen von Anfragen meistern

In der modernen Webentwicklung sind asynchrone Operationen alltäglich. Ob es darum geht, Daten von einem entfernten Server abzurufen, Dateien hochzuladen oder komplexe Berechnungen im Hintergrund durchzuführen – JavaScript stützt sich stark auf Promises und asynchrone Funktionen. Unkontrollierte asynchrone Operationen können jedoch zu Leistungsproblemen, verschwendeten Ressourcen und unerwartetem Verhalten führen. Hier kommt der AbortController ins Spiel. Dieser Artikel bietet einen umfassenden Leitfaden zum Meistern von Mustern für den Anforderungsabbruch mit dem AbortController von JavaScript, mit dem Sie robustere und effizientere Webanwendungen für ein globales Publikum erstellen können.

Was ist der AbortController?

Der AbortController ist eine integrierte JavaScript-API, mit der Sie eine oder mehrere Webanfragen abbrechen können. Er bietet eine Möglichkeit zu signalisieren, dass eine Operation abgebrochen werden soll, um unnötigen Netzwerkverkehr und Ressourcenverbrauch zu verhindern. Der AbortController arbeitet in Verbindung mit dem AbortSignal, das an die abzubrechende asynchrone Operation übergeben wird. Zusammen bieten sie einen leistungsstarken und flexiblen Mechanismus zur Verwaltung asynchroner Aufgaben.

Warum den AbortController verwenden?

Mehrere Szenarien profitieren von der Verwendung des AbortController:

• Verbesserte Leistung: Das Abbrechen von laufenden Anfragen, die nicht mehr benötigt werden, reduziert den Netzwerkverkehr und gibt Ressourcen frei, was zu schnelleren und reaktionsschnelleren Anwendungen führt.
• Vermeidung von Race Conditions: Wenn mehrere Anfragen schnell hintereinander gestartet werden, ist möglicherweise nur das Ergebnis der letzten Anfrage relevant. Das Abbrechen früherer Anfragen verhindert Race Conditions und gewährleistet die Datenkonsistenz.
• Verbesserung der Benutzererfahrung: In Szenarien wie der Suche während der Eingabe oder dem dynamischen Laden von Inhalten sorgt das Abbrechen veralteter Anfragen für eine reibungslosere und reaktionsschnellere Benutzererfahrung.
• Ressourcenmanagement: Mobile Geräte und ressourcenbeschränkte Umgebungen profitieren vom Abbrechen langlaufender oder unnötiger Anfragen, um Akkulaufzeit und Bandbreite zu schonen.

Grundlegende Verwendung

Hier ist ein grundlegendes Beispiel, das zeigt, wie man den AbortController mit der fetch-API verwendet:

Beispiel 1: Einfacher Fetch-Abbruch

            const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
 .then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json();
 })
 .then(data => {
  console.log(data);
 })
 .catch(error => {
  if (error.name === 'AbortError') {
   console.log('Fetch aborted');
  } else {
   console.error('Fetch error:', error);
  }
 });

// Bricht die Fetch-Anfrage nach 5 Sekunden ab
setTimeout(() => {
 controller.abort();
}, 5000);

            

              
                Copy
              
            
          

Erklärung:

• Ein neuer AbortController wird erstellt.
• Die Eigenschaft signal des AbortController wird an die fetch-Optionen übergeben.
• Eine setTimeout-Funktion wird verwendet, um die Anfrage nach 5 Sekunden durch den Aufruf von controller.abort() abzubrechen.
• Der catch-Block behandelt den AbortError, der ausgelöst wird, wenn die Anfrage abgebrochen wird.

Fortgeschrittene Abbruchmuster

Über das grundlegende Beispiel hinaus können verschiedene fortgeschrittene Muster verwendet werden, um den AbortController effektiv zu nutzen.

Muster 1: Abbruch beim Unmounten einer Komponente (React-Beispiel)

In komponentenbasierten Frameworks wie React ist es üblich, Anfragen zu initiieren, wenn eine Komponente gemountet wird, und sie abzubrechen, wenn die Komponente unmountet wird. Dies verhindert Speicherlecks und stellt sicher, dass die Anwendung keine Daten für Komponenten weiterverarbeitet, die nicht mehr sichtbar sind.

            import React, { useState, useEffect } from 'react';

function DataComponent() {
 const [data, setData] = useState(null);
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState(null);

 useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  const fetchData = async () => {
   try {
    const response = await fetch('https://api.example.com/data', { signal });
    if (!response.ok) {
     throw new Error(`HTTP error! status: ${response.status}`);
    }
    const json = await response.json();
    setData(json);
   } catch (error) {
    if (error.name === 'AbortError') {
     console.log('Fetch aborted');
    } else {
     setError(error);
    }
   } finally {
    setLoading(false);
   }
  };

  fetchData();

  return () => {
   controller.abort(); // Cleanup-Funktion zum Abbrechen der Anfrage
  };
 }, []); // Leeres Dependency-Array stellt sicher, dass dies nur beim Mounten/Unmounten ausgeführt wird

 if (loading) return 
Loading...
;
 if (error) return 
Error: {error.message}
;

 return (
  

   
Data:
   
{JSON.stringify(data, null, 2)}
  
 );
}

export default DataComponent;

            

              
                Copy
              
            
          

Erklärung:

• Der useEffect-Hook wird verwendet, um Nebeneffekte (in diesem Fall das Abrufen von Daten) auszuführen, wenn die Komponente gemountet wird.
• Der AbortController wird innerhalb des useEffect-Hooks erstellt.
• Die von useEffect zurückgegebene Cleanup-Funktion ruft controller.abort() auf, wenn die Komponente unmountet wird, um sicherzustellen, dass alle laufenden Anfragen abgebrochen werden.
• Ein leeres Dependency-Array ([]) wird an useEffect übergeben, was anzeigt, dass der Effekt nur einmal beim Mounten und einmal beim Unmounten ausgeführt werden soll.

Muster 2: Debouncing und Throttling

Debouncing und Throttling sind Techniken, die verwendet werden, um die Häufigkeit zu begrenzen, mit der eine Funktion ausgeführt wird. Sie werden häufig in Szenarien wie der Suche während der Eingabe oder der Größenänderung von Fenstern verwendet, bei denen häufige Ereignisse teure Operationen auslösen können. Der AbortController kann in Verbindung mit Debouncing und Throttling verwendet werden, um vorherige Anfragen abzubrechen, wenn ein neues Ereignis eintritt.

Beispiel: Debounced-Suche mit AbortController

            function debouncedSearch(query, delay = 300) {
 let controller = null; // Den Controller im Geltungsbereich halten
 return function() {
    if (controller) {
      controller.abort(); // Vorherige Anfrage abbrechen
    }

    controller = new AbortController(); // Einen neuen AbortController erstellen
    const signal = controller.signal;
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        fetch(`https://api.example.com/search?q=${query}`, { signal })
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json(); 
          })
          .then(data => {
            resolve(data);
          })
          .catch(error => {
              if (error.name === 'AbortError') {
                console.log('Search Aborted for: ' + query);
              } else {
                reject(error);
              }
          });
      }, delay);
    });
  };
}

// Anwendungsbeispiel:
const search = debouncedSearch('Example Query');
search().then(results => console.log(results)).catch(error => console.error(error)); //Erste Suche
search().then(results => console.log(results)).catch(error => console.error(error)); //Weitere Suche; bricht die vorherige ab
search().then(results => console.log(results)).catch(error => console.error(error)); //...und eine weitere

            

              
                Copy
              
            
          

Erklärung:

• Die Funktion debouncedSearch gibt eine debounced-Version der Suchfunktion zurück.
• Jedes Mal, wenn die debounced-Funktion aufgerufen wird, bricht sie zuerst alle vorherigen Anfragen mit controller.abort() ab.
• Anschließend wird ein neuer AbortController erstellt und verwendet, um eine neue Anfrage zu initiieren.
• Die setTimeout-Funktion führt eine Verzögerung ein, bevor die Anfrage gestellt wird, um sicherzustellen, dass die Suche erst durchgeführt wird, nachdem der Benutzer für einen bestimmten Zeitraum die Eingabe beendet hat.

Muster 3: Kombination mehrerer AbortSignals

In einigen Fällen müssen Sie möglicherweise eine Anfrage basierend auf mehreren Bedingungen abbrechen. Zum Beispiel möchten Sie vielleicht eine Anfrage abbrechen, wenn eine Zeitüberschreitung auftritt oder wenn der Benutzer von der Seite weg navigiert. Sie können dies erreichen, indem Sie mehrere AbortSignal-Instanzen zu einem einzigen Signal kombinieren.

Dieses Muster wird nicht direkt nativ unterstützt, und Sie müssten typischerweise Ihre eigene Kombinationslogik implementieren.

Muster 4: Zeitüberschreitungen und Fristen

Das Festlegen von Zeitüberschreitungen für Anfragen ist entscheidend, um zu verhindern, dass sie unbegrenzt hängen bleiben. Der AbortController kann verwendet werden, um Zeitüberschreitungen einfach zu implementieren.

            async function fetchDataWithTimeout(url, timeout) {
 const controller = new AbortController();
 const signal = controller.signal;

 const timeoutId = setTimeout(() => {
  controller.abort();
 }, timeout);

 try {
  const response = await fetch(url, { signal });
  clearTimeout(timeoutId); // Zeitüberschreitung aufheben, wenn die Anfrage erfolgreich abgeschlossen wird

  if (!response.ok) {
   throw new Error(`HTTP error! status: ${response.status}`);
  }
  return await response.json();
 } catch (error) {
  clearTimeout(timeoutId); // Zeitüberschreitung im Falle eines Fehlers aufheben
  throw error;
 }
}

// Verwendung:
fetchDataWithTimeout('https://api.example.com/data', 3000) // 3 Sekunden Zeitüberschreitung
 .then(data => console.log(data))
 .catch(error => console.error(error));

            

              
                Copy
              
            
          

Erklärung:

• Die Funktion fetchDataWithTimeout akzeptiert eine URL und einen Zeitüberschreitungswert als Argumente.
• Eine setTimeout-Funktion wird verwendet, um die Anfrage nach der angegebenen Zeitüberschreitung abzubrechen.
• Die Funktion clearTimeout wird sowohl im try- als auch im catch-Block aufgerufen, um sicherzustellen, dass die Zeitüberschreitung aufgehoben wird, wenn die Anfrage erfolgreich abgeschlossen wird oder ein Fehler auftritt.

Globale Überlegungen und Best Practices

Bei der Arbeit mit dem AbortController in einem globalen Kontext ist es wichtig, Folgendes zu berücksichtigen:

• Lokalisierung: Fehlermeldungen und Benutzeroberflächenelemente im Zusammenhang mit dem Abbrechen von Anfragen sollten lokalisiert werden, um sicherzustellen, dass sie für Benutzer in verschiedenen Regionen zugänglich sind.
• Netzwerkbedingungen: Die Netzwerkbedingungen können je nach geografischem Standort erheblich variieren. Passen Sie Zeitüberschreitungswerte und Abbruchstrategien an die erwartete Netzwerklatenz und Bandbreite in verschiedenen Regionen an.
• Serverseitige Überlegungen: Stellen Sie sicher, dass Ihre serverseitigen API-Endpunkte abgebrochene Anfragen ordnungsgemäß behandeln. Zum Beispiel könnten Sie einen Mechanismus implementieren, um die Verarbeitung einer Anfrage zu stoppen, wenn der Client sie abgebrochen hat.
• Barrierefreiheit: Geben Sie den Benutzern klares und informatives Feedback, wenn eine Anfrage abgebrochen wird. Dies kann den Benutzern helfen zu verstehen, warum die Anfrage abgebrochen wurde, und entsprechende Maßnahmen zu ergreifen.
• Mobil vs. Desktop: Mobile Benutzer haben möglicherweise instabilere Verbindungen. Stellen Sie sicher, dass Ihre Zeitüberschreitungen und Fehlerbehandlungen für mobile Geräte robust sind.
• Unterschiedliche Browser: Erwägen Sie Tests in verschiedenen Browsern und Versionen, um auf Kompatibilitätsprobleme mit der AbortController-API zu prüfen.

Fehlerbehandlung

Eine korrekte Fehlerbehandlung ist bei der Verwendung des AbortController entscheidend. Überprüfen Sie immer auf den AbortError und behandeln Sie ihn entsprechend.

            try {
 // ... fetch-Code ...
} catch (error) {
 if (error.name === 'AbortError') {
  console.log('Request was aborted');
  // Notwendige Bereinigungen oder UI-Aktualisierungen durchführen
 } else {
  console.error('An error occurred:', error);
  // Andere Fehler behandeln
 }
}

            

              
                Copy
              
            
          

Fazit

Der JavaScript AbortController ist ein leistungsstarkes Werkzeug zur Verwaltung asynchroner Operationen und zur Verbesserung der Leistung und Reaktionsfähigkeit von Webanwendungen. Durch das Verständnis der grundlegenden Verwendung und fortgeschrittener Muster können Sie robustere und effizientere Anwendungen erstellen, die ein besseres Benutzererlebnis für ein globales Publikum bieten. Denken Sie daran, Lokalisierung, Netzwerkbedingungen und serverseitige Überlegungen bei der Implementierung des Anforderungsabbruchs in Ihren Anwendungen zu berücksichtigen.

Durch die Nutzung der oben beschriebenen Muster können Entwickler asynchrone Operationen souverän verwalten, die Ressourcennutzung optimieren und außergewöhnliche Benutzererlebnisse in unterschiedlichen Umgebungen und für ein globales Publikum liefern.

Dieser umfassende Leitfaden sollte eine solide Grundlage für das Meistern von Mustern zum Abbrechen von Anfragen mit dem JavaScript AbortController bieten. Viel Spaß beim Programmieren!