MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Request()

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

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

構文

var myRequest = new Request(input, init);

パラメータ

input
取得したいリソースを定義する。いずれかを設定可能:
  • 取得したいリソースの直接の URL を含む USVString
  • Request オブジェクト。
init Optional
リクエストに適用するカスタム設定を含むオプションオブジェクト。設定可能なオプションは:
  • method:リクエストメソッド、たとえば GET、POST。
  • headers:Headers オブジェクトか ByteString を含む、リクエストに追加するヘッダー。
  • body: リクエストに追加するボディー:BlobBufferSourceFormDataURLSearchParamsUSVString オブジェクトが使用できる。リクエストが GET か HEAD メソッドを使用している場合、ボディーを持てないことに注意。
  • mode:リクエストで使用するモード。たとえば、cors か no-cors、same-origin。既定値は cors。Chrome では、47 以前は no-cors が既定値であり、 same-origin は 47 から使用できるようになった。
  • credentials:リクエストで使用するリクエスト credential:omit か same-origin、include が使用できる。 既定値は omit。Chrome では、47 以前は same-origin が既定値であり、include は 47 から使用できるようになった。
  • cache:リクエストで使用する cache モード:default か no-store、reload、no-cache、force-cache、only-if-cached が設定できる。
  • redirect:使用するリダイレクトモード:follow か error、manual が使用できる。Chrome では、47 以前は既定値が follow であり、manual は 47 から使用できるようになった。
  • referrer:no-referrer か client、URL を指定する USVString。既定値は client。

エラー

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

Fetch Request exampleFetch 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 exampleFetch 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) {
  ...
});

リクエストのコピーを生成するために、Request() コンストラクターに Request を渡すこともできます(これは clone() メソッドの呼び出しと同じです)。

var copy = new Request(myRequest);

ノート:最後の使い方は ServiceWorkers 内でのみ使用できます。

仕様

仕様 状態 コメント
Fetch
The definition of 'Request()' in that specification.
Living Standard  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 42.0 [1]
 
39 (39) [2] 未サポート

29 [3]

未サポート
ストリーミングレスポンスボディー 43.0 ? ? ? ?
機能 Android Android Webview Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート 42 [1] 未サポート 未サポート 未サポート 未サポート 未サポート 42.0 [1]
ストリーミングレスポンスボディー 未サポート 43.0  ? ? ? ? ? 43.0 

[1] 初期化パラメーターの既定値のいくつかは  Chrome 47 で変更されました。詳細はプロパティセクションで確認してください。

[2] 34 では、設定で有効にします。

[3] 28 では、設定で有効にします。

関連項目

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

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