DOM

インターフェイス

Request インターフェイス

→● MS

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

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

コンストラクター

new Request() ●

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

プロパティ

Request.body 読取専用

body の中身を ReadableStream として取り出すために使用されるシンプルなゲッターです。

Request.bodyUsed 読取専用

true または false で、レスポンス中で本文が既に使用されたかどうかを示します。

Request.cache 読取専用 ●

リクエストのキャッシュモード（default、reload、no-cache など）が入ります。

Request.credentials 読取専用 ●

リクエストの認証情報（omit、same-origin、include など）が入ります。既定値は same-origin です。

Request.destination 読取専用 ●

文字列で、リクエストの方向を示します。これはその種類のコンテンツがリクエストされることを示す文字列です。

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 が入ります。

メソッド

Request.arrayBuffer()

リクエスト本体を表す ArrayBuffer で解決するプロミスを返します。

Request.blob()

リクエスト本体を表す Blob で解決するプロミスを返します。

Request.clone() ●

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

Request.formData()

リクエスト本体を表す FormData で解決するプロミスを返します。

Request.json()

リクエスト本体を表す JSON で解決するプロミスを返します。

Request.text()

リクエスト本体を表す USVString（テキスト）で解決するプロミスを返します。

メモ： リクエスト本文の関数は 1 度しか呼び出せません。2 回目以降は空の文字列または ArrayBuffer で解決します。

例

const request = new Request('https://www.mozilla.org/favicon.ico');

const url = request.url;
const method = request.method;
const credentials = request.credentials;

fetch(request)
  .then(response => response.blob())
  .then(blob => {
    image.src = URL.createObjectURL(blob);
  });

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 オブジェクトでも同様です。

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);
  });

request . keepalive→●

request が［それを作成した大域オブジェクトの外で残存できるかどうか］を指示する、真偽値を返す。

request . isReloadNavigation→●

request が［再読み込みナビ用かどうか］を指示する、真偽値を返す。

request . isHistoryNavigation→●

request が［（前後ページへの）履歴ナビ用かどうか］を指示する、真偽値を返す。

request . signal→●

request に結び付けられている通達を返す。それは、AbortSignal オブジェクトであり、［request は 中止されたかどうか、および その中止イベントハンドラー］を指示する。

テスト