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()
コンストラクターは、新しい Request
オブジェクトを生成します。
構文
new Request(input)
new Request(input, options)
引数
input
-
取得したいリソースを定義します。次のいずれかの値を取ります。
- 取得したいリソースの直接の URL を含む文字列。
- 効率的にコピーを作成するための
Request
オブジェクト。なお、コンストラクターが例外を発生させる可能性を下げるため、セキュリティーを保持するための以下の動作上の更新に注意してください。- このオブジェクトがコンストラクターの呼び出しとは別のオリジンに存在する場合、
Request.referrer
が削除されます。 - このオブジェクトの
Request.mode
がnavigate
である場合、mode
の値がsame-origin
に変換されます。
- このオブジェクトがコンストラクターの呼び出しとは別のオリジンに存在する場合、
options
省略可-
リクエストに適用するカスタム設定を含むオプションオブジェクトです。設定可能なオプションは次の通りです。
method
-
リクエストメソッド、
GET
,POST
など。 headers
body
-
リクエストに追加する本体で、
Blob
,ArrayBuffer
,TypedArray
,DataView
,FormData
,URLSearchParams
, 文字列、ReadableStream
オブジェクトが使用できます。 なお、リクエストがGET
またはHEAD
メソッドを使用している場合、本体を持てません。 mode
-
リクエストで使用するモード。例えば、
cors
,no-cors
,same-origin
,navigate
です。既定値はcors
です。 credentials
-
リクエストで使用するリクエストの資格情報です。
omit
,same-origin
,include
の何れかです。既定値はsame-origin
です。 cache
-
リクエストで使用するキャッシュモードです。
redirect
-
使用するリダイレクトモードです。
follow
,error
,manual
の何れかです。 referrer
-
文字列で、
no-referrer
,client
または URL を示します。既定値はclient
です。 referrerPolicy
-
特定のアクション(サブリソースのフェッチ、 先読み、ナビゲーションの実行など)の際に、リファラーヘッダーがどのように入力されるかを変更する文字列です。
integrity
-
リクエストのサブリソースの完全性の値です(
sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=
など)。 keepalive
-
論理値で、複数のリクエストや レスポンスに対して持続的な接続を行うかどうかを示します。
signal
-
AbortSignal オブジェクトで、リクエストの通信/中止を行うために使用することができます。
既存の
Request
から新しいRequest
を作成する場合、新しいリクエストの options 引数に設定したオプションは、元のRequest
に設定された対応するオプションを置き換えます。例えば次の通りです。jsconst oldRequest = new Request( "https://github.com/mdn/content/issues/12959", { headers: { From: "webmaster@example.org" } }, ); oldRequest.headers.get("From"); // "webmaster@example.org" const newRequest = new Request(oldRequest, { headers: { From: "developer@example.org" }, }); newRequest.headers.get("From"); // "developer@example.org"
エラー
型 | 説明 |
---|---|
TypeError |
Firefox 43 以降、 Request() は http://user:password@example.com のような認証情報を含む URL の場合に TypeError を発生させます。 |
例
Fetch Request の例 (Fetch Request のライブ版 を参照) では、コンストラクターを使用して新しいリクエストオブジェクトを生成してから、 fetch()
呼び出しを使用して取得しています。画像を取得してから、それを適切に処理できるように MIME タイプを設定するため、レスポンスの Response.blob
を実行しています。それから、オブジェクト URL を生成して、 <img>
要素に表示しています。
const myImage = document.querySelector("img");
const myRequest = new Request("flowers.jpg");
fetch(myRequest)
.then((response) => response.blob())
.then((response) => {
const objectURL = URL.createObjectURL(response);
myImage.src = objectURL;
});
Fetch Request with init の例 (Fetch Request init のライブ版 を参照) では、 fetch()
を呼び出すときに初期化オブジェクトを渡している以外は同じです。
const myImage = document.querySelector("img");
const myHeaders = new Headers();
myHeaders.append("Content-Type", "image/jpeg");
const myOptions = {
method: "GET",
headers: myHeaders,
mode: "cors",
cache: "default",
};
const myRequest = new Request("flowers.jpg", myOptions);
fetch(myRequest).then((response) => {
// ...
});
同様の効果を得るために、 fetch
呼び出しに初期化オブジェクトを渡せることにも注目してください。例えば次の通りです。
fetch(myRequest, myOptions).then((response) => {
// ...
});
myOptions
の中の headers
としてオブジェクトリテラルを使用することもできます。
const myOptions = {
method: "GET",
headers: {
"Content-Type": "image/jpeg",
},
mode: "cors",
cache: "default",
};
const myRequest = new Request("flowers.jpg", myOptions);
リクエストのコピーを作成するために、 Request
オブジェクトを Request()
コンストラクターに渡すこともできます(これは clone()
メソッドを呼び出すのと似ています)。
const copy = new Request(myRequest);
メモ: 最後の使い方はサービスワーカー内でのみ使用できます。
仕様書
Specification |
---|
Fetch Standard # ref-for-dom-request① |
ブラウザーの互換性
BCD tables only load in the browser