Request() コンストラクターは、新しい Request オブジェクトを生成します。

構文

var myRequest = new Request(input[, init]);

引数

input
取得したいリソースを定義します。次のいずれかの値を取ります。
  • 取得したいリソースの直接の URL を含む USVString
  • 効率的にコピーを作成するための Request オブジェクト。なお、コンストラクターが例外をスローする可能性を下げるため、セキュリティーを保持するための以下の動作上の更新に注意してください。
    • このオブジェクトがコンストラクターの呼び出しとは別のオリジンに存在する場合、 Request.referrer が削除されます。
    • このオブジェクトの Request.modenavigate である場合、 mode の値が same-origin に変換されます。
init Optional
リクエストに適用するカスタム設定を含むオプションオブジェクトです。設定可能なオプションは次の通りです。
  • method: リクエストメソッド、 GET, POST など。
  • headers: Headers オブジェクトか ByteString を含む、リクエストに追加するヘッダー。
  • body: リクエストに追加する本文で、 Blob, BufferSource, FormData, URLSearchParams, USVString, ReadableStream オブジェクトが使用できます。なお、リクエストが GET 又は HEAD メソッドを使用している場合、本文を持てません。
  • mode: リクエストで使用するモード。例えば、 cors, no-cors, same-origin, navigate です。既定値は cors です。 Chrome では、既定値は 47 以前は no-cors でしたが、 47 から same-origin になりました。
  • credentials: リクエストで使用するリクエストの資格情報です。 omit, same-origin, include の何れかです。既定値は omit です。 Chrome では、既定値は 47 以前は same-origin でしたが、 47 から include になりました。
  • cache: リクエストで使用する cache モードです。
  • redirect: 使用するリダイレクトモードです。 follow, error, manual の何れかです。 Chrome では、既定値は 47 以前は follow でしたが、 47 から manual になりました。
  • referrer: no-referrer, client 又は URL を示す USVString です。既定値は client です。
  • integrity: リクエストの subresource integrity の値です (例えば、 sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。

エラー

説明
TypeError Firefox 43 以降、http://user:password@example.com のような認証情報を含む URL だった場合、Request() は TypeError をスローします。

Fetch Request example (Fetch Request live を参照) では、コンストラクターを使用して新しいリクエストオブジェクトを生成してから、 GlobalFetch.fetch 呼び出しを使用して取得しています。画像を取得してから、それを適切に処理できるように MIME タイプを設定するため、レスポンスの Body.blob を実行しています。それから、オブジェクト URL を生成して、 <img> 要素に表示しています。

var myImage = document.querySelector('img');

var myRequest = new Request('flowers.jpg');

fetch(myRequest).then(function(response) {
  return response.blob();
}).then(function(response) {
  var objectURL = URL.createObjectURL(response);
  myImage.src = objectURL;
});

Fetch Request with init example (Fetch Request init live を参照) では、 fetch() を呼び出すときに init オブジェクトを渡している以外は同じです。

var myImage = document.querySelector('img');

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg',myInit);

fetch(myRequest).then(function(response) {
  ... 
});

同様の効果を得るために、 fetch 呼び出しに init オブジェクトを渡せることにも注目してください。例えば次の通りです。

fetch(myRequest,myInit).then(function(response) {
  ...
});

init の中の headers としてオブジェクトリテラルを使用することもできます。

var myInit = { method: 'GET',
               headers: {
                   'Content-Type': 'image/jpeg'
               },
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg', myInit);

リクエストのコピーを作成するために、 Request() コンストラクターに Request オブジェクトを渡すこともできます (これは clone() メソッドを呼び出すのと似ています)。

var copy = new Request(myRequest);

メモ: 最後の使い方はサービスワーカー内でのみ使用できます。

仕様書

仕様書 状態 備考
Fetch
Request() の定義
現行の標準  

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

42

411

15

39

342

なし

29

283

10.1
Consume response body as a ReadableStream43 ? あり5 ? ? なし
Send ReadableStream in request body なし ? なし ? ? なし
navigate mode491546 なし あり10.1
referrer init option ?1547 なし あり10.1
cross-origin referrer stripped out and navigate mode converted to same-origin when constructor created from existing Request object. あり1554 なし あり10.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

42

411

42

411

あり あり なし10.3

4.0

5.04

Consume response body as a ReadableStream4343 ? あり5 ?10.34.0
Send ReadableStream in request body なし なし ? なし ? なし なし
navigate mode なし4915 あり なし10.35.0
referrer init option あり あり ? あり ?10.3 あり
cross-origin referrer stripped out and navigate mode converted to same-origin when constructor created from existing Request object. あり あり15 あり ?10.3 あり

1. Some default values for the init parameter changed in Chrome 47. See the Properties section for details.

2. From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Experimental Web Platform Features preference.

4. Some default values for the init parameter changed in Samsung Internet 5.0. See the Properties section for details.

5. This feature is behind the dom.streams.enabled preference and the javascript.options.streams preference. To change preferences in Firefox, visit about:config.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, YuichiNukiyama
最終更新者: mfuji09,