Request()
Request()
コンストラクターは、新しい Request
オブジェクトを生成します。
構文
var myRequest = new Request(input[, init]);
引数
- input
- 取得したいリソースを定義します。次のいずれかの値を取ります。
- 取得したいリソースの直接の URL を含む
USVString
。 - 効率的にコピーを作成するための
Request
オブジェクト。なお、コンストラクターが例外をスローする可能性を下げるため、セキュリティーを保持するための以下の動作上の更新に注意してください。- このオブジェクトがコンストラクターの呼び出しとは別のオリジンに存在する場合、
Request.referrer
が削除されます。 - このオブジェクトの
Request.mode
がnavigate
である場合、mode
の値がsame-origin
に変換されます。
- このオブジェクトがコンストラクターの呼び出しとは別のオリジンに存在する場合、
- 取得したいリソースの直接の URL を含む
- init 省略可
- リクエストに適用するカスタム設定を含むオプションオブジェクトです。設定可能なオプションは次の通りです。
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
(en-US) を実行しています。それから、オブジェクト 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() の定義 |
現行の標準 |
ブラウザーの対応
BCD tables only load in the browser