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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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.

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

Siehe auch

Fetch API