Fetch API:Body接口

2018-01-23 10:39 更新

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

规范

规范 状态 评论
Fetch
该规范中的"Body"的定义。
Living Standard

浏览器兼容性

  • 电脑端
Feature
Chrome Edge Firefox(Gecko) Internet Explorer
Opera
Safari(WebKit)
基本的支持
支持:42
 
(是) 支持:39[1] 不支持

支持:29

不支持
主体为一个 ReadableStream 支持:43 不支持[2] 不支持 支持:30 不支持
formData()方法 支持:60 不支持 支持:47 不支持
  • 移动端
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile
基本的支持
支持:42 支持:42 (是) 不支持 不支持
不支持

支持:29

不支持
主体为ReadableStream 支持:43 支持:43 ? 不支持[2] 不支持
不支持

支持:30

不支持
formData() 方法 支持:60 支持:60 ? 不支持
不支持
不支持

支持:47

不支持

上表中的标注解释:

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

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

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号