From 8dba1bffc690b6a6fff95c1dd7c265b4ddef5ed4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 13 Aug 2021 17:24:28 +0900 Subject: Body ミックスインを廃止し、 Response インターフェイスへ統合 (#1898) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - orphaned にあった Body ミックスインを廃止 - Body ミックスインのメンバーを Response インターフェイスへ移動 - 関連する記事を 2021/08/04 時点の英語版に同期 --- files/ja/web/api/response/index.html | 139 ++++++++++++++++++----------------- 1 file changed, 70 insertions(+), 69 deletions(-) (limited to 'files/ja/web/api/response/index.html') diff --git a/files/ja/web/api/response/index.html b/files/ja/web/api/response/index.html index 3884020535..3fb9af40df 100644 --- a/files/ja/web/api/response/index.html +++ b/files/ja/web/api/response/index.html @@ -9,120 +9,121 @@ tags: - Interface - Reference - Response +browser-compat: api.Response translation_of: Web/API/Response ---
{{APIRef("Fetch API")}}
-

Fetch API の Response インターフェイスは、リクエストのレスポンスを表します。

+

Response は Fetch API のインターフェイスで、リクエストのレスポンスを表します。

-

{{domxref("Response.Response()")}} コンストラクタを使い、新しい Response オブジェクトを作ることができます。しかし、ServiceWorker の {{domxref("Fetchevent.respondWith")}} や {{domxref("GlobalFetch.fetch()")}} などのように、他のAPIからResponseオブジェクトが返されるのをより頻繁に目にするでしょう。

+

Response オブジェクトは {{domxref("Response.Response()")}} コンストラクターを用いて生成することができますが、他の API 操作の結果として返される Response オブジェクトに出会う可能性が高いでしょう。例えば、サービスワーカーの {{domxref("Fetchevent.respondWith")}} や、単純な {{domxref("WindowOrWorkerGlobalScope.fetch()")}} などです。

-

コンストラクタ

+

コンストラクター

{{domxref("Response.Response","Response()")}}
新しい Response オブジェクトを返します。
-

プロパティ

+

プロパティ

+
{{domxref("Response.body")}} {{readonlyInline}}
+
本文のコンテンツの {{domxref("ReadableStream")}} です。
+
{{domxref("Response.bodyUsed")}} {{readonlyInline}}
+
本文がレスポンスで使用されたかどうかを定義する論理値が格納されます。
{{domxref("Response.headers")}} {{readonlyinline}}
-
レスポンスに関連した {{domxref("Headers")}} オブジェクトを含む。
+
レスポンスに関連した {{domxref("Headers")}} オブジェクトが入ります。
{{domxref("Response.ok")}} {{readonlyinline}}
-
レスポンスが成功（200-299 の範囲のステータス）したか否かを通知する boolean 値を含む。
+
レスポンスが成功 (200–299 の範囲のステータス) したか否かを通知する論理値が入ります。
{{domxref("Response.redirected")}} {{ReadOnlyInline}}
-
レスポンスがリダイレクトの結果であるかどうかを示します。 つまり、その URL リストには複数のエントリーがあります。
+
レスポンスがリダイレクトの結果である (つまり、その URL リストには複数のエントリーがある) かどうかを示します。
{{domxref("Response.status")}} {{readonlyinline}}
-
HTTPステータスコードを返す。(例：200 成功)
+
このレスポンスのステータスコードを返します (成功ならば 200 になります)。
{{domxref("Response.statusText")}} {{readonlyinline}}
-
ステータスコードに対応したステータスメッセージを含む（たとえば、200 で OK）。
+
ステータスコードに対応したステータスメッセージが入ります (たとえば 200 ならば OK)。
+
{{domxref("Response.trailers")}}
+
{{jsxref("Promise")}} であり、 {{domxref("Headers")}} オブジェクトを返します。これは {{domxref("Response.headers")}} にある HTTP の {{HTTPHeader("Trailer")}} ヘッダーの値です。
{{domxref("Response.type")}} {{readonlyinline}}
-
レスポンスのタイプを示す。(例：basic,cors)
+
レスポンスの種類です。 (例えば basic, cors)
{{domxref("Response.url")}} {{readonlyinline}}
-
レスポンスのURLを返す。
-
{{domxref("Response.useFinalURL")}}
-
レスポンスの最後の URL かどうかを通知する boolean 値を含む。
+
レスポンスのURLを返します。
-

Response は {{domxref("Body")}} を実装しているため、次のプロパティも使用可能です:

- -
-
{{domxref("Body.body")}} {{readonlyInline}}
-
コンテンツのボディを示す {{domxref("ReadableStream")}} の単純なゲッターです。
-
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
-
レスポンスで body が既に使用されているかどうかを示す {{domxref("Boolean")}} 値を保持する。
-
- -

メソッド

+

メソッド

+
{{domxref("Response.arrayBuffer()")}}
+
レスポンスの本文を表す {{jsxref("ArrayBuffer")}} で解決するプロミスを返します。
+
{{domxref("Response.blob()")}}
+
レスポンスの本文を表す {{domxref("Blob")}} で解決するプロミスを返します。
{{domxref("Response.clone()")}}
-
Response オブジェクトのクローンを生成する。
+
Response オブジェクトの複製を生成します。
{{domxref("Response.error()")}}
-
ネットワークエラーに関連した新しい Response オブジェクトを返す。
+
ネットワークエラーに関連した新しい Response オブジェクトを返します。
+
{{domxref("Response.formData()")}}
+
レスポンスの本文を表す {{domxref("FormData")}} で解決するプロミスを返します。
+
{{domxref("Response.json()")}}
+
レスポンスの本文のテキストを {{jsxref("JSON")}} として解釈した結果で解決するプロミスを返します。
+
{{domxref("Response.redirect()")}}
-
異なる URL で新しい response を生成する
+
異なる URL で新しい response を生成します。
+
{{domxref("Response.text()")}}
+
レスポンスの本文のテキスト表現で解決するプロミスを返します。
-

Response　は {{domxref("Body")}}　を実装しているため、次のメソッドも使用可能です:

-
-
{{domxref("Body.arrayBuffer()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、{{domxref("ArrayBuffer")}} で解決する promise を返す。
-
{{domxref("Body.blob()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{domxref("Blob")}} で解決する promise を返す。
-
{{domxref("Body.formData()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{domxref("FormData")}} オブジェクトで解決する promise を返す。
-
{{domxref("Body.json()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{jsxref("JSON")}} オブジェクトで解決する promise を返す。
-
{{domxref("Body.text()")}}
-
{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、{{domxref("USVString")}} （text）で解決する promise を返す。
-
+

例

+ +

画像のフェッチ

-

例

+

basic fetch example (run example live) では image を取得するために単純な fetch() を使用し、それを {{htmlelement("img")}} タグの中に入れて表示しています。fetch() はプロミスを返し、これはこのリソースフェッチ捜査に関連付けられた Response オブジェクトで解決します。

-

basic fetch example (run example live) では image を取得するために単純な fetch() を使用し、それを {{htmlelement("img")}} タグの中に入れて表示しています。fetch() はプロミスを返し、then の引数として Response オブジェクトを渡します。image をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、{{domxref("Body.blob")}}（{{domxref("Response")}} は body を実装しています）を実行する必要があることに注意してください。

+

画像をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、{{domxref("Response.blob")}} を実行する必要があることに注意してください。

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

 
-
カスタム Response オブジェクトを生成するために、{{domxref("Response.Response()")}} コンストラクタを使用することもできます：

+
{{domxref("Response.Response()")}} コンストラクターを使用して、独自の Response オブジェクトを生成することもできます。

+
+
const response = new Response();

+
+
Ajax 呼び出し

 
-
var myResponse = new Response();

+
ここで JSON 文字列を生成する PHP のプログラムファイルを呼び出し、結果として JSON の値を表示します。簡単なエラーハンドリングも含んでいます。

 
-
仕様

+
// Function to do an Ajax call
+const doAjax = async () => {
+  const response = await fetch('Ajax.php'); // Generate the Response object
+  if (response.ok) {
+    const jsonValue = await response.json(); // Get JSON value from the response body
+    return Promise.resolve(jsonValue);
+  } else {
+    return Promise.reject('*** PHP file not found');
+  }
+}
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様状態コメント
{{SpecName('Fetch','#response-class','Response')}}{{Spec2('Fetch')}}Initial definition

+// Call the function and output value or error message to console
+doAjax().then(console.log).catch(console.log);
+

 
-
ブラウザー実装状況

+
仕様書

 
+{{Specifications}}
 
+
ブラウザーの互換性

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

+
{{Compat}}

 
-
関連項目

+
関連情報

 
 
-- 
cgit v1.2.3-54-g00ecf