Response: bytes() Methode
Baseline 2025
Neu verfügbar
Seit Januar 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die bytes() Methode der Response-Schnittstelle nimmt einen Response-Stream und liest ihn vollständig aus. Sie gibt ein Promise zurück, das mit einem Uint8Array aufgelöst wird.
Syntax
bytes()
Parameter
Keine.
Rückgabewert
Ein Promise, das mit einem Uint8Array aufgelöst wird.
Ausnahmen
AbortErrorDOMException-
Die Anfrage wurde abgebrochen.
TypeError-
Wird aus folgenden Gründen ausgelöst:
- Der Antwortkörper ist gestört oder gesperrt.
- Es gab einen Fehler beim Dekodieren des Körperinhalts (zum Beispiel, weil der
Content-EncodingHeader falsch ist).
RangeError-
Wird ausgelöst, wenn ein Problem beim Erstellen des zugehörigen
ArrayBufferauftritt (zum Beispiel, wenn die Datengröße zu groß ist).
Beispiele
Abrufen und Dekodieren einer Datei
Der folgende Code zeigt, wie Sie eine Textdatei abrufen, den Körper als Uint8Array zurückgeben und dann in einen String dekodieren können.
const response = await fetch("https://www.example.com/textfile.txt");
const textFile = await response.bytes();
const string = new TextDecoder().decode(textFile);
console.log(string);
Abrufen eines Bilddateisignatur
Dieses Beispiel demonstriert, wie Sie bytes() verwenden können, um die Signaturbytes einer Anzahl von Bilddateien zu lesen und den Typ zu identifizieren.
HTML
Zuerst definieren wir ein <select>-Element, um den Dateityp auszuwählen, mit entsprechenden Werten, die auf die spezifische Datei auf WikiMedia Commons hinweisen.
<label for="file-select">Choose a file:</label>
<select name="Files" id="file-select">
<option value="">--Select an image type--</option>
<option
value="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png">
PNG
</option>
<option
value="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg">
JPG
</option>
<option
value="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example.gif">
GIF89a
</option>
</select>
JavaScript
Der Code prüft zuerst, ob die bytes()-Methode unterstützt wird. Wenn die Methode unterstützt wird, fügt sie einen Event-Handler für das change event auf dem <select> Element hinzu. Wenn sich der Wert ändert, übergibt sie den Wert der Auswahl (eine URL für eine Bilddatei) an die unten definierte checkSignature()-Methode. Wenn die Methode nicht unterstützt wird, wird diese Information protokolliert.
if ("bytes" in Response.prototype) {
const selectFileElement = document.getElementById("file-select");
selectFileElement.addEventListener("change", async (event) => {
try {
await checkSignature(event.target.value);
} catch (e) {
log(e);
}
});
} else {
log("Response.bytes() not supported");
}
Die checkSignature()-Methode ist unten definiert. Sie ruft eine Datei unter der angegebenen url ab und verwendet response.bytes(), um deren Inhalt als Byte-Array zu erhalten. Die Anfangsbytes werden dann mit den anfänglichen Signaturbytes einer Anzahl von üblichen Dateitypen verglichen. Der Dateiname und der Dateityp werden dann protokolliert.
async function checkSignature(url) {
if (url === "") return;
log(`File: ${url}`);
const response = await fetch(url);
const image = await response.bytes();
// File signatures from: https://en.wikipedia.org/wiki/List_of_file_signatures
const jpgSignature = [0xff, 0xd8, 0xff, 0xe0];
const pngSignature = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
const gif89aSignature = [0x47, 0x49, 0x46, 0x38, 0x39, 0x61];
if (
image
.slice(0, jpgSignature.length)
.every((byte, index) => byte === jpgSignature[index])
) {
log(`JPG signature: FF D8 FF E0`);
} else if (
image
.slice(0, pngSignature.length)
.every((byte, index) => byte === pngSignature[index])
) {
log(`PNG signature: 89 50 4E 47 0D 0A 1A 0A`);
} else if (
image
.slice(0, gif89aSignature.length)
.every((byte, index) => byte === gif89aSignature[index])
) {
log(`GIF (GIF89a) signature: 47 49 46 38 39 61`);
} else {
log("Unknown format");
}
}
Ergebnis
Wählen Sie einen Bildtyp mit der Auswahlliste. Das Protokoll sollte dann den Dateinamen zusammen mit dem Dateityp anzeigen, der von der Signatur der Datei abgeleitet wurde.
Spezifikationen
| Spezifikation |
|---|
| Fetch # dom-body-bytes |