Request

RequestFetch 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 (Fetch)
# request-class

ブラウザーの互換性

BCD tables only load in the browser

関連情報