AbortController: signal-Eigenschaft

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: Diese Funktion ist in Web Workers verfügbar.

Die schreibgeschützte Eigenschaft signal der AbortController-Schnittstelle gibt eine Instanz des AbortSignal-Objekts zurück, die verwendet werden kann, um eine asynchrone Operation nach Bedarf zu kommunizieren oder abzubrechen.

Wert

Eine Instanz des AbortSignal-Objekts.

Beispiele

Im folgenden Beispiel versuchen wir, ein Video mithilfe der Fetch API herunterzuladen.

Zuerst erstellen wir einen Controller mit dem AbortController()-Konstruktor und greifen dann über die AbortController.signal-Eigenschaft auf das zugehörige AbortSignal-Objekt zu.

Wenn die Fetch-Anfrage initiiert 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, die Anfrage durch Aufrufen von AbortController.abort() abzubrechen, wie im zweiten Event-Listener unten gezeigt.

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

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}

Hinweis: Wenn abort() aufgerufen wird, wird das fetch()-Promise mit einem AbortError abgelehnt.

Sie finden ein voll funktionsfähiges Beispiel auf GitHub; Sie können es auch live ausführen.

Spezifikationen

Specification
DOM
# ref-for-dom-abortcontroller-signal②

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
signal

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Siehe auch