Request()

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

構文

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

引数

input

取得したいリソースを定義します。次のいずれかの値を取ります。

• 取得したいリソースの直接の URL を含む USVString。
• 効率的にコピーを作成するための Request オブジェクト。なお、コンストラクターが例外をスローする可能性を下げるため、セキュリティーを保持するための以下の動作上の更新に注意してください。
  • このオブジェクトがコンストラクターの呼び出しとは別のオリジンに存在する場合、 Request.referrer が削除されます。
  • このオブジェクトの Request.mode が navigate である場合、 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=)。

エラー

例

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);

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• サービスワーカー API
• HTTP アクセス制御 (CORS)
• HTTP