Request
Request は Fetch API のインターフェイスで、リソースのリクエストを表します。
新しい Request オブジェクトは Request() コンストラクターを用いて生成することができますが、 Request オブジェクトは他の API 操作、例えばサービスワーカーの FetchEvent.request などの結果として返されたものに遭遇することの方が多いでしょう。
コンストラクター
Request()- 新しい
Requestオブジェクトを生成します。
プロパティ
Request.body(en-US) 読取専用- body の中身を
ReadableStreamとして取り出すために使用されるシンプルなゲッターです。 Request.bodyUsed(en-US) 読取専用trueまたはfalseで、レスポンス中で本文が既に使用されたかどうかを示します。Request.cache読取専用- リクエストのキャッシュモード (
default,reload,no-cacheなど) が入ります。 Request.credentials読取専用- リクエストの認証情報 (
omit,same-origin,includeなど) が入ります。既定値はsame-originです。 Request.destination(en-US) 読取専用- 文字列で、リクエストの方向を示します。これはその種類のコンテンツがリクエストされることを示す文字列です。
Request.headers読取専用- リクエストに関連付けられた
Headersオブジェクトが入ります。 Request.integrity読取専用- リクエストの subresource integrity 値 (例えば
sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=) が入ります。 Request.method読取専用- リクエストメソッド (
GET,POSTなど) が入ります。 Request.mode読取専用- リクエストのモード (
cors,no-cors,same-origin,navigateなど) が入ります。 Request.redirect読取専用- リダイレクトをどう扱うかのモードが入ります。
follow,error,manualのいずれかです。 Request.referrer読取専用- リクエストのリファラー (
clientなど) が入ります。 Request.referrerPolicy(en-US) 読取専用- リファラに関するポリシー (
no-referrerなど) が入ります。 Request.url読取専用- リクエストの URL が入ります。
メソッド
Request.arrayBuffer()(en-US)- リクエスト本体を表す
ArrayBufferで解決するプロミスを返します。 Request.blob()(en-US)- リクエスト本体を表す
Blobで解決するプロミスを返します。 Request.clone()- 現在の
Requestオブジェクトのコピーを生成します。 Request.formData()(en-US)- リクエスト本体を表す
FormDataで解決するプロミスを返します。 Request.json()(en-US)- リクエスト本体を表す
JSONで解決するプロミスを返します。 Request.text()(en-US)- リクエスト本体を表す
USVString(テキスト) で解決するプロミスを返します。
メモ: リクエスト本文の関数は 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 オブジェクトを引数として 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 の型は Blob, BufferSource, FormData, URLSearchParams, USVString ReadableStream のいずれかで、ペイロードにそのオブジェクトを文字列化するのに必要な JSON オブジェクトでも同様です。
すると Request オブジェクトを、例えば WindowOrWorkerGlobalScope.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);
});仕様書
| Specification |
|---|
| Fetch Standard # request-class |
ブラウザーの互換性
BCD tables only load in the browser