From b0a393384aa4021c915e6a650c75ff328a054cb2 Mon Sep 17 00:00:00 2001 From: MDN Date: Thu, 1 Jul 2021 00:37:12 +0000 Subject: [CRON] sync translated content --- files/zh-cn/web/api/body/arraybuffer/index.html | 142 ------------------------ files/zh-cn/web/api/body/blob/index.html | 136 ----------------------- files/zh-cn/web/api/body/body/index.html | 86 -------------- files/zh-cn/web/api/body/bodyused/index.html | 134 ---------------------- files/zh-cn/web/api/body/formdata/index.html | 122 -------------------- files/zh-cn/web/api/body/index.html | 96 ---------------- files/zh-cn/web/api/body/json/index.html | 90 --------------- files/zh-cn/web/api/body/text/index.html | 85 -------------- 8 files changed, 891 deletions(-) delete mode 100644 files/zh-cn/web/api/body/arraybuffer/index.html delete mode 100644 files/zh-cn/web/api/body/blob/index.html delete mode 100644 files/zh-cn/web/api/body/body/index.html delete mode 100644 files/zh-cn/web/api/body/bodyused/index.html delete mode 100644 files/zh-cn/web/api/body/formdata/index.html delete mode 100644 files/zh-cn/web/api/body/index.html delete mode 100644 files/zh-cn/web/api/body/json/index.html delete mode 100644 files/zh-cn/web/api/body/text/index.html (limited to 'files/zh-cn/web') diff --git a/files/zh-cn/web/api/body/arraybuffer/index.html b/files/zh-cn/web/api/body/arraybuffer/index.html deleted file mode 100644 index de711b01b9..0000000000 --- a/files/zh-cn/web/api/body/arraybuffer/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Body.arrayBuffer() -slug: Web/API/Body/arrayBuffer -translation_of: Web/API/Body/arrayBuffer ---- -

{{APIRef("Fetch")}}{{ SeeCompatTable() }}

- -

 {{domxref("Body")}}上的方法 arrayBuffer() 接受一个 {{domxref("Response")}} 流, 并等待其读取完成. 它返回一个 promise 实例, 并 resolve 一个 {{domxref("ArrayBuffer")}} 对象.

- -

语法

- -
response.arrayBuffer().then(function(buffer) {
-  // do something with buffer
-)};
- -

参数

- -

无。

- -

返回值

- -

A promise that resolves with an {{domxref("ArrayBuffer")}}.

- -

例子

- -

In our fetch array buffer example (run fetch array buffer live), we have a Play button. When pressed, the getData() function is run.

- -

In getData() we create a new request using the {{domxref("Request.Request")}} constructor, then use it to fetch an OGG music track. We also use {{domxref("AudioContext.createBufferSource")}} to create an audio buffer source.  When the fetch is successful, we read an {{domxref("ArrayBuffer")}} out of the response using arrayBuffer(), decode the audio data using {{domxref("AudioContext.decodeAudioData")}}, set the decoded data as the audio buffer source's buffer (source.buffer), then connect the source up to the {{domxref("AudioContext.destination")}}.

- -

Once getData() has finished running, we start the audio source playing with start(0), then disable the play button so it can't be clicked again when it is already playing (this would cause an error.)

- -
function getData() {
-  source = audioCtx.createBufferSource();
-
-  var myRequest = new Request('viper.ogg');
-
-  fetch(myRequest).then(function(response) {
-    response.arrayBuffer().then(function(buffer) {
-      audioCtx.decodeAudioData(buffer, function(decodedData) {
-        source.buffer = decodedData;
-        source.connect(audioCtx.destination);
-      });
-    });
-  });
-};
-
-// wire up buttons to stop and play audio
-
-play.onclick = function() {
-  getData();
-  source.start(0);
-  play.setAttribute('disabled', 'disabled');
-}
- -

标准

- - - - - - - - - - - - - - -
标准状态备注
{{SpecName('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}{{Spec2('Fetch')}} 
- -

浏览器兼容性

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatChrome(41) }}[1]
- {{ CompatChrome(42) }}
-  		34[1]
- {{ CompatGeckoDesktop(39)}}		{{ CompatNo }} -

28[1]
- 29

- 		{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
-
- -

[1] In Chrome 42, Firefox 34 and Opera 28 support for arrayBuffer() was hidden behind a preference.

- -

参考

- - - - diff --git a/files/zh-cn/web/api/body/blob/index.html b/files/zh-cn/web/api/body/blob/index.html deleted file mode 100644 index 6b292cc7a5..0000000000 --- a/files/zh-cn/web/api/body/blob/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Body.blob() -slug: Web/API/Body/blob -tags: - - Body.blob() -translation_of: Web/API/Body/blob ---- -

{{APIRef("Fetch")}}

- -

{{domxref("Body")}}  mixin的 blob()方法使用一个 {{domxref("Response")}} 流，并将其读取完成。它返回一个使用{{domxref("Blob")}}解决的promise。

- -

句法

- -
response.blob().then(function(myBlob) {
-  // do something with myBlob
-});
- -

参数

- -

None.

- -

返回值

- -

A promise that resolves with a {{domxref("Blob")}}.

- -

例子

- -

在我们 fetch request example (run fetch request live)中，我们使用Request.Request构造方法创建了一个新的request对象，然后使用它来获取一个JPG文件。当fetch成功的时候，我们使用blob()从response中读取一个Blob对象，并使用URL.createObjectURL 将它放入一个object URL ，然后把URL设置为img元素的src属性以显示这张图片。

- -

 

- -
var myImage = document.querySelector('img');
-
-var myRequest = new Request('flowers.jpg');
-
-fetch(myRequest)
-.then(function(response) {
-  return response.blob();
-})
-.then(function(myBlob) {
-  var objectURL = URL.createObjectURL(myBlob);
-  myImage.src = objectURL;
-});
-
- -

规范

- - - - - - - - - - - - - - -
规范状态说明
{{SpecName('Fetch','#dom-body-blob','blob()')}}{{Spec2('Fetch')}} 
- -

浏览器兼容性

- -

{{ CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatChrome(42) }} [1]
-  		{{CompatVersionUnknown}}{{ CompatGeckoDesktop(39)}} [2]{{ CompatNo }} -

29 [3]

- 		{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{ CompatNo }}{{CompatVersionUnknown}}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
-
- -

[1] Behind a preference in version 41.

- -

[2] Behind a preference starting with version 34.

- -

[3] Behind a preference in version 28.

- -

另见

- - diff --git a/files/zh-cn/web/api/body/body/index.html b/files/zh-cn/web/api/body/body/index.html deleted file mode 100644 index 2361cc9145..0000000000 --- a/files/zh-cn/web/api/body/body/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Body.body -slug: Web/API/Body/body -translation_of: Web/API/Body/body ---- -
{{APIRef("Fetch")}}
- -

{{domxref("Body")}} mixin的只读getter属性 body 用于暴露其body内容的{{domxref("ReadableStream")}}（流读取）。

- -

语法

- -
var stream = responseInstance.body;
- -

Value

- -

一个 {{domxref("ReadableStream")}}.

- -

例程

- -

在我们的 simple stream pump 例程中我们fetch一个图片地址，使用response.body暴露响应的流，用{{domxref("body.getReader()", "ReadableStream.getReader()")}}创建一个读取器，然后将其置入第二个自定义读取流中——有效的创建了一个完全相同的图片副本。

- -
const image = document.getElementById('target');
-
-// 请求原始图片
-fetch('./tortoise.png')
-// 取出body
-.then(response => response.body)
-.then(body => {
-  const reader = body.getReader();
-
-  return new ReadableStream({
-    start(controller) {
-      return pump();
-
-      function pump() {
-        return reader.read().then(({ done, value }) => {
-          // 读不到更多数据就关闭流
-          if (done) {
-            controller.close();
-            return;
-          }
-
-          // 将下一个数据块置入流中
-          controller.enqueue(value);
-          return pump();
-        });
-      }
-    }
-  })
-})
-.then(stream => new Response(stream))
-.then(response => response.blob())
-.then(blob => URL.createObjectURL(blob))
-.then(url => console.log(image.src = url))
-.catch(err => console.error(err));
- -

规范

- - - - - - - - - - - - - - -
规范状态备注
{{SpecName('Fetch','#dom-body-body','body')}}{{Spec2('Fetch')}} 
- -

浏览器兼容性

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

 

- -

相关链接

- - diff --git a/files/zh-cn/web/api/body/bodyused/index.html b/files/zh-cn/web/api/body/bodyused/index.html deleted file mode 100644 index fd776b8a65..0000000000 --- a/files/zh-cn/web/api/body/bodyused/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Body.bodyUsed -slug: Web/API/Body/bodyUsed -translation_of: Web/API/Body/bodyUsed ---- -

{{APIRef("Fetch")}}{{ SeeCompatTable }}

- -

bodyUsed 是{{domxref("Body")}} mixin中的一个只读属性。用以表示该body是否被使用过。

- -

语法

- -
var myBodyUsed = response.bodyUsed;
- -

可能的值

- -

{{domxref("Boolean")}}.

- -

示例

- -

在以下fetch 请求示例（运行 fetch request live）。通过{{domxref("Request.Request")}}构造器创建了一个fetch请求，来获得一张JPG图片。当fetch成功后，通过{{domxref("Blob")}} 来使用了fetch返回的资源--{{domxref("URL.createObjectURL")}}创建该资源的URL，并作为 {{htmlelement("img")}}元素的src源来显示图片。

- -

注意：在response.blob()被调用前后，输出response.bodyUsed的差异。

- -

HTML Content

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

JS Content

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

{{ EmbedLiveSample('Example', '100%', '250px') }}

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-bodyused','bodyUsed')}}{{Spec2('Fetch')}} 
- -

浏览器兼容性

- -

{{ CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatChrome(42) }} [1]
-  		{{CompatVersionUnknown}}{{ CompatGeckoDesktop(39)}} [2]{{ CompatNo }} -

29 [3]

- 		{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{ CompatNo }}{{CompatVersionUnknown}}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
-
- -

[1] Behind a preference in version 41.

- -

[2] Behind a preference starting with version 34.

- -

[3] Behind a preference in version 28.

- -

See also

- - diff --git a/files/zh-cn/web/api/body/formdata/index.html b/files/zh-cn/web/api/body/formdata/index.html deleted file mode 100644 index 846b6afa07..0000000000 --- a/files/zh-cn/web/api/body/formdata/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Body.formData() -slug: Web/API/Body/formData -translation_of: Web/API/Body/formData ---- -
{{APIRef("Fetch")}}
- -

 {{domxref("Body")}} 对象中的formData() 方法将 {{domxref("Response")}} 对象中的所承载的数据流读取并封装成为一个对象，该方法将返回一个 Promise  对象，该对象将产生一个{{domxref("FormData")}} 对象。

- -
-

注意: 该方法主要与 service workers 有关. 如果客户端提交的一个表单请求被Service Worker 所截取，您可以像下述的样例一样，调用 formData() 方法来获取一个key-value 字典, 对该字典可以进行修饰, 然后将修饰后的表填提交给远端服务器 (或在本地应用)。

-
- -

语法

- -
response.formData()
-.then(function(formdata) {
-  // do something with your formdata
-});
- -

参数

- -

无。

- -

返回值

- -

生成 {{domxref("FormData")}}对象的{{domxref("Promise")}} 对象.

- -

样例

- -

待定.

- -

详述

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-formdata','formData()')}}{{Spec2('Fetch')}} 
- -

Browser compatibility

- -

{{ CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support -

{{CompatChrome(60)}}

- 		{{ CompatGeckoDesktop(39)}} [1]{{ CompatNo }} -

{{CompatOpera(47)}}

- 		{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support -

{{CompatChrome(60)}}

- 		-

{{CompatChrome(60)}}

- 		{{ CompatNo }}{{ CompatNo }}{{ CompatNo }} -

{{CompatOperaMobile(47)}}

- 		{{ CompatNo }}
-
- -

[1] Behind a preference starting with version 34.

- -

See also

- - diff --git a/files/zh-cn/web/api/body/index.html b/files/zh-cn/web/api/body/index.html deleted file mode 100644 index d6094d90ab..0000000000 --- a/files/zh-cn/web/api/body/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -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")}}

- -

也可以看看

- - - -

 

diff --git a/files/zh-cn/web/api/body/json/index.html b/files/zh-cn/web/api/body/json/index.html deleted file mode 100644 index 58583dddf0..0000000000 --- a/files/zh-cn/web/api/body/json/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Body.json() -slug: Web/API/Body/json -tags: - - API - - BODY - - Fetch - - JSON - - 参考 - - 方法 -translation_of: Web/API/Body/json ---- -
{{APIRef("Fetch")}}
- -
{{domxref("Body")}}  mixin 的 json() 方法接收一个 {{domxref("Response")}} 流，并将其读取完成。它返回一个 Promise，Promise 的解析 resolve 结果是将文本体解析为 {{jsxref("JSON")}}。
- -

语法

- -
response.json().then(data => {
-  // do something with your data
-});
- -

参数

- -

没有。

- -

返回值

- -

返回一个被解析为JSON格式的promise对象，这可以是任何可以由JSON表示的东西 - 一个object，一个array，一个string，一个number...

- -

示例

- -

在我们的  fetch json 示例 中(运行 fetch json live), 我们使用 {{domxref("Request.Request")}} 构造函数创建一个新的请求, 然后使用它来获取一个 .json 文件。当获取成功时，我们使用 json() 读取并解析数据，然后像预期的那样从结果对象中读取值，并将其插入到列表项中以显示我们的产品数据。

- -
const myList = document.querySelector('ul');
-const myRequest = new Request('products.json');
-
-fetch(myRequest)
-  .then(response => response.json())
-  .then(data => {
-    for (const product of data.products) {
-      let listItem = document.createElement('li');
-      listItem.appendChild(
-        document.createElement('strong')
-      ).textContent = product.Name;
-      listItem.append(
-        ` can be found in ${
-          product.Location
-        }. Cost: `
-      );
-      listItem.appendChild(
-        document.createElement('strong')
-      ).textContent = `£${product.Price}`;
-      myList.appendChild(listItem);
-    }
-  });
- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}{{Spec2("Fetch")}}Initial definition
- - -

浏览器兼容性

- - - -

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

- -

相关链接

- - diff --git a/files/zh-cn/web/api/body/text/index.html b/files/zh-cn/web/api/body/text/index.html deleted file mode 100644 index 4a67985fd9..0000000000 --- a/files/zh-cn/web/api/body/text/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Body.text() -slug: Web/API/Body/text -tags: - - API - - Fetch - - 参考 - - 方法 -translation_of: Web/API/Body/text ---- -
{{APIRef("Fetch")}}
- -

{{domxref("Body")}} mixin 的 text() 方法提供了一个可供读取的“返回流”（{{domxref("Response")}} stream），并将它读取完。它返回一个包含 {{domxref("USVString")}} 对象（也就是文本）的 Promise 对象，返回结果的编码永远是 UTF-8。

- -

语法

- -
response.text().then(function (text) {
-  // do something with the text response
-});
- -

参数

- -

无。

- -

返回值

- -

A promise that resolves with a {{domxref("USVString")}}.

- -

示例

- -

在我们 fetch text example (运行 fetch text live)的案例中， 我们有一个 {{htmlelement("article")}} 元素和三个链接（储存在 myLinks 数组中），首先，遍历 myLinks 数组，并且给数组中的所有元素添加 onclick 事件监听器，当按钮被点击的时候，链接的 data-page 标识作为会参数传入 getData() 中。

- -

当进入 getData() 函数， 我们使用 {{domxref("Request.Request","Request()")}} 构造函数创建了一个请求（Request）对象，然后，使用它获取指定的.txt的文件， 当fetch 函数执行成功， 我们使用 text() 函数来返回一个{{jsxref("USVString")}} (text) 对象，将它设置到 {{htmlelement("article")}} 对象的{{domxref("Element.innerHTML","innerHTML")}} （元素文本）中。

- -
const myArticle = document.querySelector('article');
-const myLinks   = document.querySelectorAll('ul a');
-
-for(i = 0; i <= myLinks.length-1; i++) {
-  myLinks[i].onclick = function(e) {
-    e.preventDefault();
-    var linkData = e.target.getAttribute('data-page');
-    getData(linkData);
-  }
-};
-
-function getData(pageId) {
-  console.log(pageId);
-  const myRequest = new Request(pageId + '.txt');
-  fetch(myRequest).then(function(response) {
-    return response.text().then(function(text) {
-      myArticle.innerHTML = text;
-    });
-  });
-}
- -

规范

- - - - - - - - - - - - - - -
规范状态备注
{{SpecName('Fetch','#dom-body-text','text()')}}{{Spec2('Fetch')}}
- -

浏览器兼容性

- - - -

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

- -

See also

- - -- cgit v1.2.3-54-g00ecf