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 (テキスト) で解決するプロミスを返します。

次のスニペットでは、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;

すると 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);
  });

• ServiceWorker API
• HTTP アクセス制御 (CORS)
• HTTP