Response.bytes() — Methode · JavaScript-Referenz

Signatur

Response.prototype.bytes()

Beschreibung

Die Methode bytes() der Response-Schnittstelle liest den Body-Stream einer Antwort bis zum Ende aus und gibt ein Promise zurück, das mit einem Uint8Array erfüllt wird. Damit bekommst du die Binärdaten direkt als typisiertes Array, das du indizieren, durchlaufen oder weiterreichen kannst.

Bisher lief das über den Umweg new Uint8Array(await response.arrayBuffer()). bytes() spart diesen Zwischenschritt und macht den Code kürzer und klarer. Nützlich ist die Methode überall, wo du mit Rohbytes arbeitest: Dateiformate anhand ihrer „Magic Bytes“ erkennen, Prüfsummen mit crypto.subtle.digest() berechnen, WebAssembly-Module laden, Bilder oder Protokollpuffer verarbeiten.

Wie alle Body-Lesemethoden (json(), text(), blob(), arrayBuffer(), formData()) verbraucht auch bytes() den Body. Danach ist response.bodyUsed gleich true, und jeder weitere Leseversuch schlägt fehl. Brauchst du den Body mehrfach, rufe vorher response.clone() auf.

Die Methode gibt es auch auf Request (Request.prototype.bytes()) und in ähnlicher Form auf Blob (Blob.prototype.bytes()).

Rückgabewert

Typ

Promise<Uint8Array>

Beschreibung

Ein Promise, das mit einem Uint8Array des vollständigen Body-Inhalts erfüllt wird. Ist der Body leer oder null, bekommst du ein leeres Uint8Array (Länge 0).

Beispiele

Dateityp anhand der Magic Bytes erkennen

const detectImageType = async (url) => {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP-Fehler: ${response.status}`);
  }
  const bytes = await response.bytes();

  // PNG beginnt mit 0x89 'P' 'N' 'G'
  if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47) {
    return 'image/png';
  }
  // JPEG beginnt mit 0xFF 0xD8 0xFF
  if (bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff) {
    return 'image/jpeg';
  }
  return 'unbekannt';
};

console.log(await detectImageType('/bilder/logo.png'));

image/png

SHA-256-Prüfsumme eines Downloads berechnen

const sha256OfUrl = async (url) => {
  const response = await fetch(url);
  const bytes = await response.bytes();
  const hashBuffer = await crypto.subtle.digest('SHA-256', bytes);
  return Array.from(new Uint8Array(hashBuffer))
    .map((b) => b.toString(16).padStart(2, '0'))
    .join('');
};

const hash = await sha256OfUrl('/downloads/setup.zip');
console.log(`SHA-256: ${hash}`);

SHA-256: 9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08

Body mit clone() mehrfach lesen

const response = new Response('Hallo');
const copy = response.clone();

const bytes = await response.bytes();
console.log(bytes);                 // Rohbytes (UTF-8)
console.log(await copy.text());     // Klon ist noch lesbar
console.log(response.bodyUsed);     // Original ist verbraucht

try {
  await response.bytes();
} catch (err) {
  console.log(err.name);
}

Uint8Array(5) [72, 97, 108, 108, 111] Hallo true TypeError

Fallback für ältere Umgebungen

const readBytes = async (response) =>
  typeof response.bytes === 'function'
    ? response.bytes()
    : new Uint8Array(await response.arrayBuffer());

const data = await readBytes(await fetch('/daten.bin'));
console.log(data.byteLength);

1024

// Wichtig · Fallstricke

Body nur einmal lesbar: Nach bytes() ist der Stream verbraucht. Ein zweiter Aufruf oder ein anschließendes json()/text() wirft einen TypeError. Wenn du den Body mehrfach brauchst, vorher response.clone() aufrufen.
Weitere Fehler: Das Promise wird auch mit einem TypeError abgelehnt, wenn der Stream gesperrt ist (z. B. durch einen aktiven getReader()) oder beim Lesen ein Netzwerkfehler passiert. Bricht ein AbortSignal den Download ab, kommt ein AbortError. Wenn die Speicherzuweisung für den Puffer fehlschlägt, gibt es einen RangeError.
Speicherbedarf: Die ganze Antwort landet im Arbeitsspeicher. Für sehr große Dateien liest du besser stückweise über response.body.getReader().
HTTP-Fehler: fetch() lehnt bei 404 oder 500 nicht ab. Prüfe response.ok, bevor du die Bytes weiterverarbeitest.
Kompatibilität: Die Methode ist relativ neu (Firefox 128, Safari 18, Chrome 132, Node.js 22.3). Für ältere Umgebungen nimmst du den Fallback new Uint8Array(await response.arrayBuffer()).
CORS: Bei opaken Antworten (mode: 'no-cors') ist der Body leer, und du bekommst ein leeres Uint8Array.

Siehe auch

Response.arrayBuffer() Response.blob() Response.text() Response.json() Response.clone() Response.bodyUsed Request.bytes() Blob.bytes() Uint8Array