Response: свойство body

Доступное только для чтения свойство body интерфейса Response представляет собой ReadableStream содержимого тела ответа.

Значение

ReadableStream или null для объектов Response, созданных с пустым свойством body, и для HTTP ответов без тела.

Поток представляет собой поток байтов для чтения, который поддерживает чтение без копирования с использованием ReadableStreamBYOBReader.

Примечание: В настоящее время браузеры не следуют требованию спецификации устанавливать свойству body значение null для ответов без тела (например, для ответов на запросы HEAD или 204 No Content).

Примеры

Копирование изображения

В нашем простом примере мы получаем изображение, открываем поток ответа, используя response.body, создаем считыватель с помощью ReadableStream.getReader(), а затем помещаем фрагменты исходного потока во второй поток для чтения, фактически создавая идентичную копию изображения.

js
const image = document.getElementById("target");

// Получаем исходное изображение
fetch("./tortoise.png")
  // Извлекаем его тело как ReadableStream
  .then((response) => response.body)
  .then((body) => {
    const reader = body.getReader();

    return new ReadableStream({
      start(controller) {
        return pump();

        function pump() {
          return reader.read().then(({ done, value }) => {
            // Когда больше не нужно использовать данные, закрываем поток
            if (done) {
              controller.close();
              return;
            }

            // Помещаем следующий фрагмент данных в целевой поток
            controller.enqueue(value);
            return pump();
          });
        }
      },
    });
  })
  .then((stream) => new Response(stream))
  .then((response) => response.blob())
  .then((blob) => URL.createObjectURL(blob))
  .then((url) => console.log((image.src = url)))
  .catch((err) => console.error(err));

Создание читателя BYOB

В этом примере мы создаем ReadableStreamBYOBReader из тела ответа с помощью ReadableStream.getReader({mode: 'byob'}). Затем мы можем использовать этот считыватель для реализации передачи данных ответа без копирования.

js
async function getProducts(url) {
  const response = await fetch(url);
  const reader = response.body.getReader({ mode: "byob" });
  // читаем ответ
}

getProducts(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);

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

Specification
Fetch Standard
# ref-for-dom-body-body①

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

BCD tables only load in the browser

Смотрите также