codecamp

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">

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后面。

使用Fetch
Body接口属性:body
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Fetch API官方文档指南

Fetch API方法

WindowOrWorkerGlobalScope执行者:window

window属性

WindowOrWorkerGlobalScope执行者:WorkerGlobalScope

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }