Fetch API の Request インターフェイスは、リソースのリクエストを表します。
新しい Request オブジェクトは {{domxref("Request.Request()")}} コンストラクターを用いて生成することができますが、 Request オブジェクトは他の API 操作、例えばサービスワーカーの {{domxref("FetchEvent.request")}} などの結果として返されたものに遭遇することの方が多いでしょう。
Request オブジェクトを生成します。default, reload, no-cache など) が入ります。audio, image, iframe など) が入ります。omit, same-origin, include など) が入ります。既定値は same-origin です。sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=) が入ります。GET, POST など) が入ります。cors, no-cors, same-origin, navigate など) が入ります。follow, error, manual のいずれかです。client など) が入ります。no-referrer など) が入ります。Request は {{domxref("Body")}} を実装しているため、以下のプロパティを継承しています。
Request オブジェクトのコピーを生成します。Request は {{domxref("Body")}} を実装しているため、以下のメソッドも利用できます。
メモ: {{domxref("Body")}} の関数は 1 度しか呼び出せません。 2 回目以降は空の文字列または ArrayBuffer で解決します。
次のスニペットでは、Request() コンストラクターを使用して (スクリプトと同じディレクトリーにある画像ファイルのために) 新しい request を生成し、いくつかリクエストのプロパティ値を返しています。
const request = new Request('https://www.mozilla.org/favicon.ico');
const URL = request.url;
const method = request.method;
const credentials = request.credentials;
このリクエストは、下記のように Request オブジェクトを引数として {{domxref("WindowOrWorkerGlobalScope.fetch()")}} に渡すことで読み取ることができます。
fetch(request)
.then(response => response.blob())
.then(blob => {
image.src = URL.createObjectURL(blob);
});
以下のスニペットでは、 Request() コンストラクターにいくつかの初期化データと本文コンテンツを付けて、本文ペイロードを必要とする API リクエストのための新しいリクエストを生成します。
const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
const URL = request.url;
const method = request.method;
const credentials = request.credentials;
const bodyUsed = request.bodyUsed;
メモ: body の型は {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} {{domxref("ReadableStream")}} のいずれかで、ペイロードにそのオブジェクトを文字列化するのに必要な JSON オブジェクトでも同様です。
すると Request オブジェクトを、例えば {{domxref("GlobalFetch.fetch()")}} 呼び出しの引数として渡すことで API リクエストを取得できて、レスポンスを取得できます。
fetch(request)
.then(response => {
if (response.status === 200) {
return response.json();
} else {
throw new Error('Something went wrong on api server!');
}
})
.then(response => {
console.debug(response);
// ...
}).catch(error => {
console.error(error);
});
| 仕様書 | 状態 | 備考 |
|---|---|---|
| {{SpecName('Fetch','#request-class','Request')}} | {{Spec2('Fetch')}} | 初回定義 |
{{Compat("api.Request")}}