Request
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
Request
はフェッチ API のインターフェイスで、リソースのリクエストを表します。
新しい Request
オブジェクトは Request()
コンストラクターを用いて生成することができますが、 Request
オブジェクトは他の API 操作、例えばサービスワーカーの FetchEvent.request
などの結果として返されたものに遭遇することの方が多いでしょう。
コンストラクター
Request()
-
新しい
Request
オブジェクトを生成します。
プロパティ
Request.body
読取専用-
本体の中身の
ReadableStream
です。 Request.bodyUsed
読取専用-
true
またはfalse
で、レスポンス中で本体が既に使用されたかどうかを示します。 Request.cache
読取専用-
リクエストのキャッシュモード (
default
,reload
,no-cache
など) が入ります。 Request.credentials
読取専用-
リクエストの認証情報 (
omit
,same-origin
,include
など) が入ります。既定値はsame-origin
です。 Request.destination
読取専用-
文字列で、リクエストされたコンテンツの型を表します。
Request.headers
読取専用-
リクエストに関連付けられた
Headers
オブジェクトが入ります。 Request.integrity
読取専用-
リクエストのサブリソース完全性の値を保持します(
sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=
など)。 Request.method
読取専用-
リクエストメソッド (
GET
,POST
など) を保持します。 Request.mode
読取専用-
リクエストのモード (
cors
,no-cors
,same-origin
,navigate
など) を保持します。 Request.redirect
読取専用-
リダイレクトをどう扱うかのモードが入ります。
follow
,error
,manual
のいずれかです。 Request.referrer
読取専用-
このリクエストのリファラー (
client
など) が入ります。 Request.referrerPolicy
読取専用-
リファラに関するポリシー (
no-referrer
など) が入ります。 Request.signal
読取専用-
リクエストに関連付けられた
AbortSignal
を返します。 Request.url
読取専用-
リクエストの URL が入ります。
メソッド
Request.arrayBuffer()
-
リクエストの本体の
ArrayBuffer
表現で解決するプロミスを返します。 Request.blob()
-
リクエストの本体の
Blob
表現で解決するプロミスを返します。 Request.bytes()
-
リクエスト本体の
Uint8Array
表現で解決するプロミスを返します。 Request.clone()
-
現在の
Request
オブジェクトのコピーを生成します。 Request.formData()
-
リクエストの本体の
FormData
表現で解決するプロミスを返します。 Request.json()
-
リクエストの本体を
JSON
で解釈した結果で解決するプロミスを返します。 Request.text()
-
リクエストの本体のテキスト表現で解決するプロミスを返します。
メモ: リクエスト本体の機能は一度しか実行することができません。それ以降の呼び出しは、TypeError で拒否され、本体ストリームがすでに使用されていることを示すエラーが表示されます。
例
次のスニペットでは、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
オブジェクトを引数として 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 の型は Blob
, ArrayBuffer
, TypedArray
, DataView
, FormData
, URLSearchParams
, ReadableStream
, String
オブジェクトのいずれか、および文字列リテラルのみですので、 JSON オブジェクトを本体に追加するには、そのオブジェクトの文字列化をする必要があります。
すると Request
オブジェクトを、例えば 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);
});
仕様書
Specification |
---|
Fetch Standard # request-class |
ブラウザーの互換性
BCD tables only load in the browser