From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/zh-tw/web/api/response/index.html | 120 ++++++++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 files/zh-tw/web/api/response/index.html (limited to 'files/zh-tw/web/api/response/index.html') diff --git a/files/zh-tw/web/api/response/index.html b/files/zh-tw/web/api/response/index.html new file mode 100644 index 0000000000..8899c22fa5 --- /dev/null +++ b/files/zh-tw/web/api/response/index.html @@ -0,0 +1,120 @@ +--- +title: Response +slug: Web/API/Response +translation_of: Web/API/Response +--- +
{{APIRef("Fetch API")}}
+ +

Fetch API  的 Response 介面代表了一個請求會返回的回應。

+ +

你可以用 {{domxref("Response.Response()")}} 建構子創建一個新的 Response物件。但實務上碰到 Response 物件的時機，比較常出現在進行了一個 API 操作後，得到返回的 Response 物件。舉例而言，使用 service worker {{domxref("Fetchevent.respondWith")}} 或是使用單純的{{domxref("GlobalFetch.fetch()")}}。

+ +

建構子

+ +
+
{{domxref("Response.Response","Response()")}}
+
創建一個新的  Response 物件。
+
+ +

屬性

+ +
+
{{domxref("Response.headers")}} {{readonlyinline}}
+
包含與此 response 相關的 {{domxref("Headers")}} 物件。
+
{{domxref("Response.ok")}} {{readonlyinline}}
+
無論此 response 是不是成功 ( 狀態碼 200-299 ) 都會包含一個 boolean 狀態。
+
{{domxref("Response.redirected")}} {{ReadOnlyInline}}
+
指出此 response 是不是個重新導向的結果，如果是的話，代表此 URL 具有一個以上的入口。
+
{{domxref("Response.status")}} {{readonlyinline}}
+
包含此  response  的狀態碼(例如：成功時為 200 )。
+
{{domxref("Response.statusText")}} {{readonlyinline}}
+
包含狀態碼所對應的狀態文字 (例如： OK 對應 200)。
+
{{domxref("Response.type")}} {{readonlyinline}}
+
包含此 response 的類型 (例如： basic, cors)。
+
{{domxref("Response.url")}} {{readonlyinline}}
+
包含此 response 的 URL。
+
{{domxref("Response.useFinalURL")}}
+
包含一個 boolean 狀態，指出此 URL 是否為此 response 的最後一步。
+
+ +

Response 實做了{{domxref("Body")}}, 所以它另有以下可用的屬性：

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

方法

+ +
+
{{domxref("Response.clone()")}}
+
建立一份  Response 的複製物件。
+
{{domxref("Response.error()")}}
+
Returns a new Response object associated with a network error.
+
{{domxref("Response.redirect()")}}
+
Creates a new response with a different URL.
+
+ +

Response implements {{domxref("Body")}}, so it also has the following methods available to it:

+ +
+
{{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).
+
+ +

範例

+ +

在基本 fetch 範例 (run example live) 中，我們使用 fetch() 呼叫來得到圖片，並使用 {{htmlelement("img")}} tag 顯示。 這裡的fetch() 呼叫返回了一個 promise，它使用與資源 fetch 操作有關的 Response 進行解析。你可能有發現，由於我們要求的是一張圖片，所以需要用 {{domxref("Body.blob")}} ({{domxref("Response")}} 時做了 body) 讓 response 有正確的 MIME 類型。

+ +
const image = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  const objectURL = URL.createObjectURL(blob);
+  image.src = objectURL;
+});
+ +

除此之外，你也能用 {{domxref("Response.Response()")}} 建構子去建立自己的客製化 Response 物件：

+ +
const response = new Response();
+ +

規範

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#response-class','Response')}}{{Spec2('Fetch')}}Initial definition
+ +

瀏覽器相容性

+ + + +

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

+ +

參考

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