AbortController
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019.
Hinweis: Dieses Feature ist verfügbar in Web Workers.
Das AbortController
-Interface stellt ein Controller-Objekt dar, das Ihnen ermöglicht, eine oder mehrere Web-Anfragen bei Bedarf abzubrechen.
Sie können ein neues AbortController
-Objekt mit dem AbortController()
-Konstruktor erstellen. Die Kommunikation mit einer asynchronen Operation erfolgt über ein AbortSignal
-Objekt.
Konstruktor
AbortController()
-
Erstellt eine neue Instanz eines
AbortController
-Objekts.
Instanz-Eigenschaften
AbortController.signal
Nur lesbar-
Gibt eine Instanz eines
AbortSignal
-Objekts zurück, das zur Kommunikation mit oder zum Abbruch einer asynchronen Operation verwendet werden kann.
Instanz-Methoden
AbortController.abort()
-
Bricht eine asynchrone Operation ab, bevor sie abgeschlossen ist. Dies kann fetch-Anfragen, den Verbrauch von Antwortinhalten und Strömen abbrechen.
Beispiele
Hinweis: Es gibt zusätzliche Beispiele in der AbortSignal
Referenz.
Im folgenden Beispiel versuchen wir, ein Video mit der Fetch API herunterzuladen.
Zunächst erstellen wir einen Controller mit dem AbortController()
-Konstruktor und greifen dann auf ein zugehöriges AbortSignal
-Objekt über die AbortController.signal
-Eigenschaft zu.
Wenn die fetch-Anfrage gestartet wird, übergeben wir das AbortSignal
als Option innerhalb des Optionsobjekts der Anfrage (das {signal}
unten). Dies verknüpft das Signal und den Controller mit der fetch-Anfrage und ermöglicht es uns, sie durch Aufrufen von AbortController.abort()
abzubrechen, wie unten im zweiten Ereignis-Listener zu sehen ist.
Wenn abort()
aufgerufen wird, lehnt das fetch()
-Promise mit einem DOMException
namens AbortError
ab.
let controller;
const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");
downloadBtn.addEventListener("click", fetchVideo);
abortBtn.addEventListener("click", () => {
if (controller) {
controller.abort();
console.log("Download aborted");
}
});
async function fetchVideo() {
controller = new AbortController();
const signal = controller.signal;
try {
const response = await fetch(url, { signal });
console.log("Download complete", response);
// process response further
} catch (err) {
console.error(`Download error: ${err.message}`);
}
}
Wenn die Anfrage nach dem fetch()
-Aufruf abgebrochen wird, aber bevor der Antwortkörper gelesen wurde, wird der Versuch, den Antwortkörper zu lesen, mit einer AbortError
-Ausnahme abgelehnt.
async function get() {
const controller = new AbortController();
const request = new Request("https://example.org/get", {
signal: controller.signal,
});
const response = await fetch(request);
controller.abort();
// The next line will throw `AbortError`
const text = await response.text();
console.log(text);
}
Ein voll funktionsfähiges Beispiel finden Sie auf GitHub; Sie können es auch live ansehen.
Spezifikationen
Specification |
---|
DOM Standard # interface-abortcontroller |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Fetch API
- Abortable Fetch von Jake Archibald