Fetch: abbrechen
Die Möglichkeit, laufende Netzwerkanfragen abzubrechen, ist entscheidend für die Erstellung reaktionsschneller und effizienter Webanwendungen. In JavaScript bietet die Schnittstelle AbortController einen leistungsstarken Mechanismus, um Fetch-Anfragen zu beenden. Dieser Artikel befasst sich mit der Verwendung von AbortController zur Verwaltung von Fetch-Anfragen und bietet ausführliche Erklärungen sowie praktische Beispiele, um Ihr Verständnis zu vertiefen. Weitere Informationen zu Fetch finden Sie auf unserer vorherigen Seite, Fetch API.
Einführung in AbortController
AbortController ist Teil der Fetch API und ermöglicht es Ihnen, eine oder mehrere Fetch-Anfragen abzubrechen. Durch die Integration von AbortController in Ihre Fetch-Anfragen können Sie den Zeitpunkt dieser Anfragen steuern und sicherstellen, dass sie nicht unnötig weiterlaufen und Ressourcen verschwenden.
Grundlegende Verwendung von AbortController
Um eine Fetch-Anfrage abzubrechen, erstellen Sie zunächst eine Instanz von AbortController und übergeben dann dessen Eigenschaft signal an die Fetch-Anfrage. Hier ist ein einfaches Beispiel:
In diesem Beispiel erstellen wir eine Instanz von AbortController und übergeben ihr signal an die Fetch-Anfrage. Durch den Aufruf von controller.abort() können wir die Fetch-Anfrage abbrechen.
Praktisches Beispiel: Eine Fetch-Anfrage durch Benutzeraktion abbrechen
AbortController ist besonders nützlich, um Fetch-Anfragen basierend auf Benutzerinteraktionen abzubrechen. Stellen Sie sich ein Szenario vor, in dem ein Benutzer einen Datenabruf durch Klicken auf eine Schaltfläche abbrechen kann:
<body>
<button id="abortButton">Abort Fetch Request</button>
<script>
const controller = new AbortController();
const signal = controller.signal;
document.getElementById('abortButton').addEventListener('click', () => {
controller.abort();
});
fetch('https://httpbin.org/delay/5', { signal })
.then(response => response.json())
.then(data => alert(
'Data is successfully fetched! Refresh the page and try aborting.'
))
.catch(error => {
if (error.name === 'AbortError') {
alert('Fetch request was aborted by the user');
} else {
alert('Fetch error: ' + error.message);
}
});
</script>
</body>In diesem Beispiel bricht das Klicken auf die Schaltfläche mit der ID abortButton die laufende Fetch-Anfrage ab. Wir haben einen Dummy-Endpunkt verwendet, der 5 Sekunden benötigt, um die Anfrage abzuschließen. Wenn Sie vor Ablauf der 5 Sekunden auf die Schaltfläche klicken, brechen Sie die Anfrage ab.
Mehrere Fetch-Anfragen mit AbortController verwalten
AbortController kann mehrere Fetch-Anfragen gleichzeitig verwalten. Sie können denselben Controller für mehrere Fetch-Anfragen verwenden und sie alle auf einmal abbrechen. Wenn Sie AbortController verwenden, denken Sie immer daran, den AbortError angemessen zu behandeln und alle erforderlichen Aufräumarbeiten durchzuführen.
In diesem Szenario bricht die Methode controller.abort() alle Fetch-Anfragen ab, die mit demselben Signal verknüpft sind.
Erweiterte Verwendung von AbortController
AbortController mit anderen asynchronen Operationen kombinieren
AbortController kann auch mit anderen asynchronen Operationen kombiniert werden. Beispielsweise möchten Sie möglicherweise eine Fetch-Anfrage abbrechen, wenn innerhalb eines asynchronen Workflows eine bestimmte Bedingung erfüllt ist:
In diesem Beispiel wird die Fetch-Anfrage durch eine andere asynchrone Operation nach einer festgelegten Zeitüberschreitung abgebrochen. Die API, die wir über fetch aufgerufen haben, ist ein Dummy-Endpunkt, der 5 Sekunden benötigt, um zu antworten, und wir haben eine Zeitüberschreitung festgelegt, um die Anfrage nach einer Sekunde abzubrechen.
Fazit
AbortController ist ein leistungsstarkes Werkzeug zur Verwaltung von Fetch-Anfragen in JavaScript. Wenn Sie AbortController verstehen und einsetzen, können Sie reaktionsschnellere und effizientere Webanwendungen erstellen. Wir haben verschiedene praktische Anwendungsfälle untersucht, vom durch Benutzer ausgelösten Abbruch bis hin zur Implementierung von Anfrage-Timeouts und der gleichzeitigen Verwaltung mehrerer Fetch-Anfragen. Mit diesen Techniken können Sie die Leistung und das Benutzererlebnis Ihrer Webanwendungen verbessern.
Practice
What is the purpose of passing the signal property from an AbortController to a fetch request?