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-tw/orphaned/web/api/body/index.html | 100 ++++++++++++++++++++++ files/zh-tw/orphaned/web/api/body/json/index.html | 74 ++++++++++++++++ 2 files changed, 174 insertions(+) create mode 100644 files/zh-tw/orphaned/web/api/body/index.html create mode 100644 files/zh-tw/orphaned/web/api/body/json/index.html (limited to 'files/zh-tw/orphaned') diff --git a/files/zh-tw/orphaned/web/api/body/index.html b/files/zh-tw/orphaned/web/api/body/index.html new file mode 100644 index 0000000000..0794ac997e --- /dev/null +++ b/files/zh-tw/orphaned/web/api/body/index.html @@ -0,0 +1,100 @@ +--- +title: Body +slug: orphaned/Web/API/Body +tags: + - API + - BODY + - Experimental + - Fetch + - Fetch API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - request +translation_of: Web/API/Body +original_slug: Web/API/Body +--- +
{{ APIRef("Fetch") }}
+ +

The Body {{glossary("mixin")}} of the Fetch API represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.

+ +

Body is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated body (a stream), a used flag (initially unset), and a MIME type (initially the empty byte sequence).

+ +

Properties

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
A {{domxref("Boolean")}} that indicates whether the body has been read.
+
+ +

Methods

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.
+
{{domxref("Body.blob()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
+
{{domxref("Body.formData()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
+
{{domxref("Body.json()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.
+
{{domxref("Body.text()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is always decoded using UTF-8.
+
+ +

Examples

+ +

The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.

+ +

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(res => res.blob())
+	.then(res => {
+		var objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});
+ +

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

+ +

Specifications

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

Browser compatibility

+ + + +

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

+ +

See also

+ + + +

 

diff --git a/files/zh-tw/orphaned/web/api/body/json/index.html b/files/zh-tw/orphaned/web/api/body/json/index.html new file mode 100644 index 0000000000..44d12f70fa --- /dev/null +++ b/files/zh-tw/orphaned/web/api/body/json/index.html @@ -0,0 +1,74 @@ +--- +title: Body.json() +slug: orphaned/Web/API/Body/json +translation_of: Web/API/Body/json +original_slug: Web/API/Body/json +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Body")}} mixin 的 json() 會拿 {{domxref("Response")}} stream 並完整地讀取他。它會回傳一個能夠實現 (resolve) 把回傳的結果的 body text 解析成 {{jsxref("JSON")}} 型別的 Promise。

+ +

語法

+ +
response.json().then(function(data) {
+  // do something with your data
+});
+ +

參數

+ +

None.

+ +

回傳

+ +

一個能夠實現 (resolve) 把回傳的結果的 body text 解析成 JSON 型別的 Promise。這可以是任何能夠被 JSON 呈現的資料型別 — 物件 (object), 陣列 (array), 字串 (string), 數字 (number)...

+ +

範例

+ +

在我們的範例 fetch json example (run fetch json live) 中，我們用 constructor {{domxref("Request.Request")}} 產生一個新的請求，並且用它去取回 .json 檔案。 當成功取回 (fetch) 時，我們使用 json() 去讀取跟解析資料，然後依照我們期待的把回傳的結果物件 (resulting objects) 裡讀取到的數值存入 list 中藉以顯示我們的產品資料。

+ +
var myList = document.querySelector('ul');
+
+var myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(function(response) { return response.json(); })
+  .then(function(data) {
+    for (var i = 0; i < data.products.length; i++) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '<strong>' + data.products[i].Name + '</strong> can be found in ' +
+                           data.products[i].Location +
+                           '. Cost: <strong>£' + data.products[i].Price + '</strong>';
+      myList.appendChild(listItem);
+    }
+  });
+ +

規範

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-json','json()')}}{{Spec2('Fetch')}}
+ +

瀏覽器相容性

+ + + +

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

+ +

參見

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