AbortController

AbortController()

Erstellt eine neue Instanz eines AbortController-Objekts.

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.

AbortController.abort()

Bricht eine asynchrone Operation ab, bevor sie abgeschlossen ist. Dies kann fetch-Anfragen, den Verbrauch von Antwortinhalten und Strömen abbrechen.

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.

• Fetch API
• Abortable Fetch von Jake Archibald