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/ja/web/api/request/index.html | 172 ++++++++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 files/ja/web/api/request/index.html (limited to 'files/ja/web/api/request/index.html') diff --git a/files/ja/web/api/request/index.html b/files/ja/web/api/request/index.html new file mode 100644 index 0000000000..e44da70c13 --- /dev/null +++ b/files/ja/web/api/request/index.html @@ -0,0 +1,172 @@ +--- +title: Request +slug: Web/API/Request +tags: + - API + - Fetch + - Fetch API + - Interface + - Networking + - Reference + - request +translation_of: Web/API/Request +--- +
{{APIRef("Fetch API")}}
+ +

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

+ +

新しい Request オブジェクトは {{domxref("Request.Request()")}} コンストラクターを用いて生成することができますが、 Request オブジェクトは他の API 操作、例えばサービスワーカーの {{domxref("FetchEvent.request")}} などの結果として返されたものに遭遇することの方が多いでしょう。

+ +

コンストラクター

+ +
+
{{domxref("Request.Request","Request()")}}
+
新しい Request オブジェクトを生成します。
+
+ +

プロパティ

+ +
+
{{domxref("Request.cache")}} {{readonlyInline}}
+
リクエストのキャッシュモード (default, reload, no-cache など) が入ります。
+
{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}
+
リクエストのコンテキスト (audio, image, iframe など) が入ります。
+
{{domxref("Request.credentials")}} {{readonlyInline}}
+
リクエストの認証情報 (omit, same-origin, include など) が入ります。既定値は same-origin です。
+
{{domxref("Request.destination")}} {{ReadOnlyInline}}
+
{{domxref("RequestDestination")}} 列挙型の文字列で、リクエストの方向を示します。これはその種類のコンテンツがリクエストされることを示す文字列です。
+
{{domxref("Request.headers")}} {{readonlyInline}}
+
リクエストに関連付けられた {{domxref("Headers")}} オブジェクトが入ります。
+
{{domxref("Request.integrity")}} {{readonlyInline}}
+
リクエストの subresource integrity 値 (例えば sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=) が入ります。
+
{{domxref("Request.method")}} {{readonlyInline}}
+
リクエストメソッド (GET, POST など) が入ります。
+
{{domxref("Request.mode")}} {{readonlyInline}}
+
リクエストのモード ( cors, no-cors, same-origin, navigate など) が入ります。
+
{{domxref("Request.redirect")}} {{readonlyinline}}
+
リダイレクトをどう扱うかのモードが入ります。 follow, error, manual のいずれかです。
+
{{domxref("Request.referrer")}} {{readonlyInline}}
+
リクエストのリファラー (client など) が入ります。
+
{{domxref("Request.referrerPolicy")}} {{readonlyInline}}
+
リファラに関するポリシー (no-referrer など) が入ります。
+
{{domxref("Request.url")}} {{readonlyInline}}
+
リクエストの URL が入ります。
+
+ +

Request は {{domxref("Body")}} を実装しているため、以下のプロパティを継承しています。

+ +
+
{{domxref("Body.body", "body")}} {{readonlyInline}}
+
body の中身を {{domxref("ReadableStream")}} として取り出すために使用されるシンプルなゲッターです。
+
{{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}
+
{{domxref("Boolean")}} であり、レスポンス中で本文が既に使用されたかどうかを示します。
+
+ +

メソッド

+ +
+
{{domxref("Request.clone()")}}
+
現在の Request オブジェクトのコピーを生成します。
+
+ +

Request は {{domxref("Body")}} を実装しているため、以下のメソッドも利用できます。

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
リクエスト本体を表す {{domxref("ArrayBuffer")}} で解決する Promise が返ります。
+
{{domxref("Body.blob()")}}
+
リクエスト本体を表す {{domxref("Blob")}} で解決する Promise が返ります。
+
{{domxref("Body.formData()")}}
+
リクエスト本体を表す {{domxref("FormData")}} で解決する Promise が返ります。
+
{{domxref("Body.json()")}}
+
リクエスト本体を表す {{domxref("JSON")}} で解決する Promise が返ります。
+
{{domxref("Body.text()")}}
+
リクエスト本体を表す {{domxref("USVString")}} (テキスト) で解決する Promise が返ります。
+
+ +
+

メモ: {{domxref("Body")}} の関数は 1 度しか呼び出せません。 2 回目以降は空の文字列または ArrayBuffer で解決します。

+
+ +

例

+ +

次のスニペットでは、Request() コンストラクターを使用して (スクリプトと同じディレクトリーにある画像ファイルのために) 新しい request を生成し、いくつかリクエストのプロパティ値を返しています。

+ +
const request = new Request('https://www.mozilla.org/favicon.ico');
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+
+ +

このリクエストは、下記のように Request オブジェクトを引数として {{domxref("WindowOrWorkerGlobalScope.fetch()")}} に渡すことで読み取ることができます。

+ +
fetch(request)
+  .then(response => response.blob())
+  .then(blob => {
+    image.src = URL.createObjectURL(blob);
+  });
+ +

以下のスニペットでは、 Request() コンストラクターにいくつかの初期化データと本文コンテンツを付けて、本文ペイロードを必要とする API リクエストのための新しいリクエストを生成します。

+ +
const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+const bodyUsed = request.bodyUsed;
+
+ +
+

メモ: body の型は {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} {{domxref("ReadableStream")}} のいずれかで、ペイロードにそのオブジェクトを文字列化するのに必要な JSON オブジェクトでも同様です。

+
+ +

すると Request オブジェクトを、例えば {{domxref("GlobalFetch.fetch()")}} 呼び出しの引数として渡すことで API リクエストを取得できて、レスポンスを取得できます。

+ +
fetch(request)
+  .then(response => {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Something went wrong on api server!');
+    }
+  })
+  .then(response => {
+    console.debug(response);
+    // ...
+  }).catch(error => {
+    console.error(error);
+  });
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Fetch','#request-class','Request')}}{{Spec2('Fetch')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

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