Response.body

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Response 接口的只读属性 body 是暴露响应体内容的 ReadableStream。

值

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

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

示例

在我们的简单 pump 流示例中，我们获取一个图片，使用 response.body 暴露响应的流，用 ReadableStream.getReader() 创建一个 reader，然后将其置入第二个自定义读取流中——有效的创建了一个完全相同的图片副本。

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

// 请求原始图片
fetch("./tortoise.png")
  // 取出 body
  .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));

规范

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

浏览器兼容性

BCD tables only load in the browser

参见