Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Response : méthode bytes()

Baseline 2025
Newly available

Depuis January 2025, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

Note : Cette fonctionnalité est disponible via les Web Workers.

La méthode bytes() de l'interface Response prend le flux de la réponse et le lit jusqu'à la fin. Elle retourne une promesse qui est résolue avec un objet Uint8Array.

Syntaxe

js
bytes()

Paramètres

Aucun.

Valeur de retour

Une promesse qui est résolue avec un objet Uint8Array.

Exceptions

AbortError DOMException

La requête a été annulée.

TypeError

Levée pour l'une des raisons suivantes :

RangeError

Levée s'il y a un problème lors de la création de l'objet ArrayBuffer associé (par exemple, si la taille des données est trop grande).

Exemples

Récupérer et décoder un fichier

Le code ci-dessous montre comment récupérer un fichier texte, retourner le corps sous forme de Uint8Array, puis le décoder en une chaîne de caractères.

js
const reponse = await fetch("https://www.exemple.com/textfile.txt");
const fichierTexte = await reponse.bytes();
const chaineDeCaracteres = new TextDecoder().decode(fichierTexte);
console.log(chaineDeCaracteres);

Obtenir la signature d'un fichier image

Cet exemple montre comment utiliser bytes() pour lire les octets de signature de plusieurs fichiers image et identifier leur type.

HTML

Nous définissons d'abord un élément HTML <select> pour choisir le type de fichier, avec des valeurs correspondant à des fichiers spécifiques sur WikiMedia Commons à récupérer.

html
<label for="file-select">Choisir un fichier&nbsp;:</label>

<select name="Files" id="file-select">
  <option value="">--Sélectionner un type d'image--</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

Le code vérifie d'abord si la méthode bytes() est prise en charge. Si c'est le cas, il ajoute un gestionnaire d'évènement pour l'évènement change sur l'élément <select>. Lorsque la valeur change, il passe la valeur de la sélection (une URL de fichier image) à la méthode verifierSignature() définie ci-dessous. Si la méthode n'est pas prise en charge, il l'indique dans le journal.

js
if ("bytes" in Response.prototype) {
  const elementSelectFichier = document.getElementById("file-select");
  elementSelectFichier.addEventListener("change", (event) => {
    try {
      verifierSignature(event.target.value);
    } catch (e) {
      log(e);
    }
  });
} else {
  log("Response.bytes() n'est pas pris en charge");
}

La méthode verifierSignature() est définie ci-dessous. Elle récupère un fichier à l'URL donnée, utilise response.bytes() pour obtenir son contenu sous forme de tableau d'octets. Les premiers octets sont ensuite comparés aux octets de signature de plusieurs types de fichiers courants. Le nom du fichier et le type de fichier sont ensuite affichés dans le journal.

js
async function verifierSignature(url) {
  if (url === "") return;
  log(`Fichier : ${url}`);
  const reponse = await fetch(url);
  const image = await reponse.bytes();

  // Signatures de fichiers depuis : https://en.wikipedia.org/wiki/List_of_file_signatures
  const signatureJpg = [0xff, 0xd8, 0xff, 0xe0];
  const signaturePng = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
  const signatureGif89a = [0x47, 0x49, 0x46, 0x38, 0x39, 0x61];

  if (
    image
      .slice(0, signatureJpg.length)
      .every((octet, index) => octet === signatureJpg[index])
  ) {
    log(`Signature JPG : FF D8 FF E0`);
  } else if (
    image
      .slice(0, signaturePng.length)
      .every((octet, index) => octet === signaturePng[index])
  ) {
    log(`Signature PNG : 89 50 4E 47 0D 0A 1A 0A`);
  } else if (
    image
      .slice(0, signatureGif89a.length)
      .every((octet, index) => octet === signatureGif89a[index])
  ) {
    log(`Signature GIF (GIF89a) : 47 49 46 38 39 61`);
  } else {
    log("Format inconnu");
  }
}

Résultat

Choisissez un type d'image à l'aide de la liste de sélection. Le journal doit alors afficher le nom du fichier ainsi que le type de fichier déterminé à partir de la signature du fichier.

Spécifications

Specification
Fetch
# dom-body-bytes

Compatibilité des navigateurs

Voir aussi