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() の定義
現行の標準  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 42
完全対応 42
完全対応 41
補足
補足 Some default values for the init parameter changed in Chrome 47. See the Properties section for details.
Edge 完全対応 15Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 完全対応 10.1WebView Android 完全対応 42
完全対応 42
完全対応 41
補足
補足 Some default values for the init parameter changed in Chrome 47. See the Properties section for details.
Chrome Android 完全対応 42
完全対応 42
完全対応 41
補足
補足 Some default values for the init parameter changed in Chrome 47. See the Properties section for details.
Edge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
完全対応 4.0
完全対応 5.0
補足
補足 Some default values for the init parameter changed in Samsung Internet 5.0. See the Properties section for details.
Consume response body as a ReadableStream
実験的
Chrome 完全対応 43Edge ? Firefox 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the dom.streams.enabled preference and the javascript.options.streams preference. To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari 未対応 なしWebView Android 完全対応 43Chrome Android 完全対応 43Edge Mobile ? Firefox Android 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the dom.streams.enabled preference and the javascript.options.streams preference. To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
Send ReadableStream in request body
実験的
Chrome 未対応 なしEdge ? Firefox 未対応 なしIE ? Opera ? Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
navigate mode
実験的
Chrome 完全対応 49Edge 完全対応 15Firefox 完全対応 46IE 未対応 なしOpera 完全対応 ありSafari 完全対応 10.1WebView Android 未対応 なしChrome Android 完全対応 49Edge Mobile 完全対応 15Firefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS 完全対応 10.3Samsung Internet Android 完全対応 5.0
referrer init option
実験的
Chrome ? Edge 完全対応 15Firefox 完全対応 47IE 未対応 なしOpera 完全対応 ありSafari 完全対応 10.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 あり
cross-origin referrer stripped out and navigate mode converted to same-origin when constructor created from existing Request object.
実験的
Chrome 完全対応 ありEdge 完全対応 15Firefox 完全対応 54IE 未対応 なしOpera 完全対応 ありSafari 完全対応 10.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 15Firefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

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

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