From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/body/index.html | 100 ++++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 files/zh-cn/web/api/body/index.html (limited to 'files/zh-cn/web/api/body/index.html') diff --git a/files/zh-cn/web/api/body/index.html b/files/zh-cn/web/api/body/index.html new file mode 100644 index 0000000000..cd27c34fab --- /dev/null +++ b/files/zh-cn/web/api/body/index.html @@ -0,0 +1,100 @@ +--- +title: Body +slug: Web/API/Body +tags: + - API + - BODY + - Fetch + - bolb() + - json() + - request +translation_of: Web/API/Body +--- +

{{ APIRef("Fetch") }}

+ +

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

+ +

Body被{{domxref("Request")}} 和{{domxref("Response")}}实现，并为这些对象提供了一个相关联的主体（字节流），一个已使用的标志（最初未设置）和一个MIME类型（最初为空字节序列）。

+ +

属性

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
一个简单的getter用于暴露一个{{domxref("ReadableStream")}}类型的主体内容。
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
一个{{domxref("Boolean")}} 值指示是否body已经被标记读取。
+
+ +

方法

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

范例

+ +

在基本 fetch 使用实例 (查看运行效果) 中，我们使用简单的 fetch 请求获取一张图片并将其使用 {{htmlelement("img")}} 标签展示。你可能注意到当我们请求一张图片，需要使用 {{domxref("Body.blob")}} ({{domxref("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();
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#body-mixin','Body')}}{{Spec2('Fetch')}} 
+ +

浏览器兼容情况

+ + + +

{{Compat("api.Body")}}

+ +

也可以看看

+ + + +

 

-- cgit v1.2.3-54-g00ecf