响应：body 属性

body 是 Response 接口的只读属性，它是一个包含主体内容的 ReadableStream。

值

一个 ReadableStream，或者对于任何使用空 body 属性 构造 的 Response 对象，或对于任何没有 主体 的实际 HTTP 响应，则为 null。

该流是一个 可读字节流，它支持使用 ReadableStreamBYOBReader 进行零拷贝读取。

注意：当前浏览器实际上并不符合将 body 属性设置为 null 的规范要求，以用于没有主体（例如，对 HEAD 请求的响应，或 204 No Content 响应）的响应。

示例

复制图像

在我们的 简单流泵 示例中，我们获取一个图像，使用 response.body 公开响应的流，使用 ReadableStream.getReader() 创建一个阅读器，然后将该流的块入队到第二个自定义可读流中 - 实际上创建了图像的相同副本。

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

// Fetch the original image
fetch("./tortoise.png")
  // Retrieve its body as 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 }) => {
            // When no more data needs to be consumed, close the stream
            if (done) {
              controller.close();
              return;
            }

            // Enqueue the next data chunk into our target stream
            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 阅读器

在此示例中，我们使用 ReadableStream.getReader({mode: 'byob'}) 从主体构造一个 ReadableStreamBYOBReader。然后，我们可以使用此阅读器来实现响应数据的零拷贝传输。

js
async function getProducts(url) {
  const response = await fetch(url);
  const reader = response.body.getReader({ mode: "byob" });
  // read the response
}

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

规范

规范
Fetch 标准
# ref-for-dom-body-body①

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅