Request

Fetch APIRequest インターフェイスは、リソースのリクエストを表します。

新しい Request オブジェクトは Request.Request() コンストラクターを用いて生成することができますが、 Request オブジェクトは他の API 操作、例えばサービスワーカーの FetchEvent.request などの結果として返されたものに遭遇することの方が多いでしょう。

コンストラクター

Request()
新しい Request オブジェクトを生成します。

プロパティ

Request.cache 読取専用
リクエストのキャッシュモード (default, reload, no-cache など) が入ります。
Request.context 読取専用
リクエストのコンテキスト (audio, image, iframe など) が入ります。
Request.credentials 読取専用
リクエストの認証情報 (omit, same-origin, include など) が入ります。既定値は same-origin です。
Request.destination 読取専用
RequestDestination 列挙型の文字列で、リクエストの方向を示します。これはその種類のコンテンツがリクエストされることを示す文字列です。
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 読取専用
リファラに関するポリシー (no-referrer など) が入ります。
Request.url 読取専用
リクエストの URL が入ります。

RequestBody を実装しているため、以下のプロパティを継承しています。

body 読取専用
body の中身を ReadableStream として取り出すために使用されるシンプルなゲッターです。
bodyUsed 読取専用
Boolean であり、レスポンス中で本文が既に使用されたかどうかを示します。

メソッド

Request.clone()
現在の Request オブジェクトのコピーを生成します。

RequestBody を実装しているため、以下のメソッドも利用できます。

Body.arrayBuffer()
リクエスト本体を表す ArrayBuffer で解決する Promise が返ります。
Body.blob()
リクエスト本体を表す Blob で解決する Promise が返ります。
Body.formData()
リクエスト本体を表す FormData で解決する Promise が返ります。
Body.json()
リクエスト本体を表す JSON で解決する Promise が返ります。
Body.text()
リクエスト本体を表す USVString (テキスト) で解決する Promise が返ります。

メモ: 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 オブジェクトを引数として 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 オブジェクトを、例えば 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);
  });

仕様書

仕様書 状態 備考
Fetch
Request の定義
現行の標準 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報