Fetch API：Body接口

Fetch API的Body mixin表示响应/请求的主体，允许你声明一下它的内容类型以及它应该如何处理。

Body是通过Request和Response来实现的。这为这些对象提供了一个关联的主体（一个流），一个使用的标志（最初未设置）和一个MIME类型（最初是空字节序列）。

Body接口属性

Body.body（只读）

一个简单的getter用来发现正文内容的ReadableStream。

Body.bodyUsed（只读）

一个Boolean表明是否已经阅读主体的内容。

Body接口方法

Body.arrayBuffer()

采取一个Response流，并将其读入完成。它返回一个承诺，使用一个ArrayBuffer解决。

Body.blob()

采取一个Response流，并将其读入完成。它返回一个承诺，使用一个Blob解决。

Body.formData()

采取一个Response流，并将其读入完成。它返回一个承诺，使用一个FormData对象解决。

Body.json()

采取一个Response流，并将其读入完成。它返回一个承诺，使用JSON对象解决。

Body.text()

采取一个Response流，并将其读入完成。它返回一个用USVString（文本）来解决的承诺。响应总是使用UTF-8进行解码。

例子

下面的示例使用简单的 fetch 调用来获取图像并将其显示在<img>标记中。你会注意到，因为我们正在请求一个图像，所以我们需要运行Body.blob()（Response实体）来为响应提供正确的MIME类型。

HTML内容

<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png" rel="external nofollow" >

JS内容

var myImage = document.querySelector('.my-image');
fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
	.then(res => res.blob())
	.then(res => {
		var objectURL = URL.createObjectURL(res);
		myImage.src = objectURL;
});

规范

浏览器兼容性

• 电脑端

• 移动端

上表中的标注解释：

[1]从第34版开始优先。

[2]可读流当前在Firefox中启用，但隐藏在dom.streams.enabled和javascript.options.streamsprefs后面。