Response: blob() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨März 2017⁩.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die blob() Methode des Response Interfaces nimmt einen Response Stream und liest ihn vollständig aus. Sie gibt ein Promise zurück, das mit einem Blob aufgelöst wird.

Hinweis: Wenn der Response einen Response.type von "opaque" hat, wird der resultierende Blob eine Blob.size von 0 und einen Blob.type von leerem String "" haben, was ihn für Methoden wie URL.createObjectURL() nutzlos macht.

Rückgabewert

Ein Promise, das mit einem Blob aufgelöst wird, dessen Daten die Bytes des Körpers sind und dessen Medientyp dem Wert des Content-Type Headers der Antwort entspricht.

Ausnahmen

AbortError DOMException

Die Anfrage wurde abgebrochen.

TypeError

Wird aus einem der folgenden Gründe ausgelöst:

Der Antwortkörper ist gestört oder gesperrt.
Es gab einen Fehler beim Dekodieren des Inhalts des Körpers (zum Beispiel, weil der Content-Encoding Header falsch ist).

Beispiele

In unserem Fetch Request Beispiel (führen Sie den Fetch Request live aus), erstellen wir eine neue Anfrage mit dem Request() Konstruktor, dann verwenden wir sie, um ein JPG abzurufen. Wenn der Abruf erfolgreich ist, lesen wir ein Blob aus der Antwort mit blob(), fügen es in eine Objekt-URL ein mit URL.createObjectURL(), und setzen dann diese URL als Quelle eines <img> Elements, um das Bild anzuzeigen.

const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => response.blob())
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });