Body

Fetch API 中的 Body mixin 代表响应/请求的正文,允许你声明其内容类型是什么以及应该如何处理。

BodyRequestResponse实现,并为这些对象提供了一个相关联的主体(字节流),一个已使用的标志(最初未设置)和一个MIME类型(最初为空字节序列)。

属性

Body.body 只读
一个简单的getter用于暴露一个ReadableStream类型的主体内容。
Body.bodyUsed 只读
一个Boolean (en-US) 值指示是否body已经被标记读取。

方法

Body.arrayBuffer()
使Response挂起一个流操作并且在完成时读取其值,它返回一个Promise (en-US)对象,其resolve参数类型是ArrayBuffer。此操作会将bodyUsed状态改为已使用(true)。
Body.blob()
使Response挂起一个流操作并且在完成时读取其值,它返回一个Promise (en-US)对象,其resolve参数类型是Blob。此操作会将bodyUsed状态改为已使用(true)。
Body.formData()
使Response挂起一个流操作并且在完成时读取其值,它返回一个Promise (en-US)对象,其resolve参数类型是FormData表单。此操作会将bodyUsed状态改为已使用(true)。
Body.json()
使Response挂起一个流操作并且在完成时读取其值,它返回一个Promise (en-US)对象,其resolve参数类型是使用JSON解析body文本的结果。此操作会将bodyUsed状态改为已使用(true)。
Body.text()
使Response挂起一个流操作并且在完成时读取其值,它返回一个Promise (en-US)对象,其resolve参数类型是USVString(文本)。此操作会将bodyUsed状态改为已使用(true)。

范例

基本 fetch 使用实例 (查看运行效果) 中,我们使用简单的 fetch 请求获取一张图片并将其使用 <img> 标签展示。你可能注意到当我们请求一张图片,需要使用 Body.blob (Response 实现 body 接口以发送正确的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('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(response) {
  var objectURL = URL.createObjectURL(response);
  myImage.src = objectURL;
});

你也可以使用 Response.Response() 构造函数创建自定义的 Response 对象。

const response = new Response();

规范

Specification Status Comment
Fetch
Body
Living Standard  

浏览器兼容情况

BCD tables only load in the browser

也可以看看