Ответ: метод bytes()

Примечание: Эта функция доступна в Потоках обработки веб-приложений.

Метод bytes() интерфейса Response принимает поток Response и считывает его до конца. Он возвращает промис, который разрешается с массивом Uint8Array.

Синтаксис

bytes()

Параметры

Нет.

Возвращаемое значение

Промис, который разрешается массивом Uint8Array.

Исключения

DOMException AbortError

Запрос был отменён.

TypeError

Выбрасывается по одной из следующих причин:

Тело ответа повреждено или заблокировано.
Произошла ошибка при декодировании содержимого тела (например, из-за неправильного заголовка Content-Encoding).

RangeError

Возникла проблема при создании связанного ArrayBuffer. Например, если размер данных превышает Number.MAX_SAFE_INTEGER.

Примеры

Получение и декодирование файла

Код ниже демонстрирует, как получить текстовый файл, вернуть тело как Uint8Array и затем декодировать его в строку.

const response = await fetch("https://www.example.com/textfile.txt");
const textFile = await response.bytes();
const string = new TextDecoder().decode(textFile);
console.log(string);

Получение сигнатуры файла изображения

Этот пример демонстрирует, как использовать bytes() для чтения сигнатурных байтов нескольких файлов изображений и определения типа.

HTML

Сначала определяем элемент <select> для выбора типа файла с соответствующими значениями, указывающими на конкретный файл на WikiMedia commons для получения.

<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

Код сначала проверяет, поддерживается ли метод bytes(). Если метод поддерживается, он добавляет обработчик события change для элемента <select>. При изменении значения он передает значение выбора (URL файла изображения) методу checkSignature() , определённому ниже. Если метод не поддерживается, он записывает эту информацию в лог.

if ("bytes" in Response.prototype) {
  const selectFileElement = document.getElementById("file-select");
  selectFileElement.addEventListener("change", (event) => {
    try {
      checkSignature(event.target.value);
    } catch (e) {
      log(e);
    }
  });
} else {
  log("Response.bytes() not supported");
}

Метод checkSignature() определён ниже. Он получает файл по заданному url, и использует response.bytes() для получения его содержимого в виде массива байтов. Начальные байты сравниваются с начальными сигнатурными байтами нескольких распространённых типов файлов. Затем в лог записываются имя файла и тип файла.

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");
  }
}

Результат

Выберите тип изображения с помощью списка выбора. Затем в лог должны быть выведены имя файла и определённый из сигнатуры тип файла.

Спецификации

Спецификация
Fetch # dom-body-bytes

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`bytes`	132	132	128	117	18	132	128	Нет	18	Нет	132

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Response/bytes