13. Request API

#リクエストAPI

ブラウザーは、サーバーに送信される HTTP リクエストを構築するために使用される Request() コンストラクターをネイティブに提供します。生成される Response インスタンスは、fetch() のパラメータとして使用できます。

Request オブジェクトの構築ではデータ構造のみが構築され、HTTP リクエストは発行されないことに注意してください。リクエストが実際に発行されるのは、それが fetch() メソッドに渡された場合だけです。

##施工方法

コンストラクターとしての Request の構文は次のとおりで、Request インスタンスオブジェクトを返します。

new Request(url: String, [init: Object]): リクエスト

最初のパラメータはリクエストされた URL 文字列で、2 番目のパラメータは HTTP リクエストの構築に使用されるオプションの設定オブジェクトです。このオブジェクトのタイプについては以下で説明します。

{
  本体: オブジェクト
  キャッシュ: 文字列
  資格情報: 文字列
  ヘッダー:オブジェクト
  整合性: 文字列
  キープアライブ: ブール値
  メソッド: 文字列
  モード: 文字列
  リダイレクト: 文字列
  リファラー: 文字列
  参照元ポリシー: 文字列
  requestMode: 文字列
  requestCredentials: 文字列
  シグナル: AbortSignal
}

第二パラメータ設定オブジェクトの各属性の意味は以下のとおりです。

body: HTTP リクエストのデータ本体。Blob、BufferSource、FormData、String、および URLSearchParams タイプのいずれかである必要があります。
cache: 要求されたキャッシュモード。
credentials: リクエストで使用される資格情報。省略、同一オリジン、または含めるように設定できます。 Chrome 47 より前では、デフォルト値は同じオリジンでしたが、Chrome 47 以降では、デフォルト値は include でした。
headers: HTTP リクエストデータヘッダーを表すオブジェクト、タイプ Headers オブジェクトインスタンス。
integrity: 要求されたリソースのリソース整合性検証値 (sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE= など)。
method: HTTP メソッド。通常は GET、POST、DELETE、デフォルトは GET です。
mode: リクエストモード (cors、no-cors、navigate など)。デフォルトは cors です。
redirect: リクエストで使用されるモード。エラー、フォロー、または手動に設定できます。デフォルトはフォローです。
referrer: リクエストのソース。デフォルトは about:client です。

以下に 2 つの例を示します。

// 例 1
const request = new Request('flowers.jpg');

//例2
const myInit = {
  メソッド: "GET"、
  ヘッダー: {
    "Content-Type": "image/jpeg",
  }、
  モード: "cors"、
  キャッシュ: "デフォルト",
};

const request = new Request('flowers.jpg', myInit);

「Request()」には別の構文があります。最初のパラメータは別の Request オブジェクトで、2 番目のパラメータは引き続き設定オブジェクトです。新しい Request オブジェクトを返します。これは、最初のパラメーターの Request オブジェクトを変更するのと同じです。

新しいリクエスト(リクエスト: リクエスト, [init: オブジェクト]): リクエスト

##インスタンスのプロパティ

Request インスタンスオブジェクトのプロパティのほとんどは、そのコンストラクターの 2 番目のパラメーター構成オブジェクトのプロパティです。

(1)「本体」

body 属性は、HTTP リクエストのデータ本体を返します。その値は ReadableStream オブジェクトまたは null です (GET または HEAD リクエストにはデータ本体がありません)。

const request = new Request('/myEndpoint', {
  メソッド: "POST"、
  本文: "Hello world"、
});

request.body; // ReadableStream オブジェクト

Firefox はこの属性をサポートしていないことに注意してください。

(2)「ボディ使用済み」

bodyused 属性は、body が読み取られたかどうかを示すブール値です。

(3)「キャッシュ」

「cache」属性は、要求されたキャッシュモードを示す読み取り専用の文字列です。可能な値は、default、force-cache、no-cache、no-store、only-if-cached、および reload です。

(4)「資格情報」

「credentials」属性は、他のドメインからの Cookie がクロスドメイン要求で送信されるかどうかを示す読み取り専用の文字列です。可能な値は、省略 (伝送されない)、含める (伝送される)、same-origin (同一オリジン Cookie のみが伝送される) です。

(5)「目的地」

destination 属性は、リクエストされたコンテンツのタイプを示す文字列です。可能な値は、''、'audio'、'audioworklet'、'document'、'embed'、'font'、'frame'、'iframe' です。、「イメージ」、「マニフェスト」、「オブジェクト」、「ペイントワークレット」、「レポート」、「スクリプト」、「シェアードワーカー」、「スタイル」、「トラック」、「ビデオ」、「ワーカー」、「xslt」など。

(6)「ヘッダー」

headers プロパティは、リクエストデータヘッダーを表す読み取り専用の Headers インスタンスオブジェクトです。

(7)「誠実さ」

「integrity」属性は、要求されたリソースの完全性の検証値を表す。

(8)「方法」

method 属性は、リクエストのメソッド (GET、POST など) を示す読み取り専用の文字列です。

(9)「モード」

「mode」属性は、クロスドメインリクエストが効果的に実行できるかどうかを検証するために使用される読み取り専用の文字列です。可能な値は、same-origin、no-cors、および cors です。

(10)「リダイレクト」

「redirect」属性は、リダイレクト時の処理モードを示す読み取り専用の文字列です。指定可能な値は、follow、error、manual です。

(11)「参照者」

「referrer」属性は、リクエストのリファラー URL を表す読み取り専用の文字列です。

(12)「リファラーポリシー」

referrerPolicy 属性は、リクエストの処理ポリシーに referrer 属性を含めるかどうかを決定する読み取り専用の文字列です。

(13)「信号」

signal は、現在のリクエストに対応する割り込み信号 AbortSignal オブジェクトを含む読み取り専用プロパティです。

(14)「URL」

url は、現在のリクエストの文字列を含む読み取り専用の文字列です。

const myRequest = 新しいリクエスト('flowers.jpg');
const myURL = myRequest.url;

##インスタンスメソッド

データ本体の抽出方法

arrayBuffer(): Promise オブジェクトを返し、Request データ本体を ArrayBuffer オブジェクトとして返します。
blob(): Promise オブジェクトを返し、Request のデータ本体を Blob オブジェクトとして返します。
json(): Promise オブジェクトを返し、Request データ本体を JSON オブジェクトとして返します。
text(): Promise オブジェクトを返し、Request データ本体を文字列として返します。
formData(): Promise オブジェクトを返し、Request のデータ本体をフォームデータ FormData オブジェクトとして返します。

以下は json() メソッドの例です。

const obj = { こんにちは: "世界" };

const request = new Request("/myEndpoint", {
  メソッド: "POST"、
  本体: JSON.stringify(obj)、
});

request.json().then((data) => {
  // JSONデータを処理する
});

.formData() メソッドは Promise オブジェクトを返し、最終結果は、キーと値のペアで表されるさまざまなフォーム要素を含む FormData フォームオブジェクトです。サーバーに送信されたリクエストをインターセプトする必要があるシナリオは多くないため、このメソッドはほとんど使用されません。通常、Service Worker でネットワークリクエストをインターセプトして処理し、フォームデータを変更してからサーバーに送信します。

self.addEventListener('fetch', イベント => {
  //フォーム送信リクエストをインターセプトする
  もし （
    イベント.リクエスト.メソッド === 'POST' &&
    event.request.headers.get('Content-Type') === 'application/x-www-form-urlencoded'
  ) {
    event.respondWith(handleFormSubmission(event.request));
  }
});

非同期関数 handleFormSubmission(request) {
  const formData = await request.formData();
  formData.append('追加フィールド', '追加値');

  const newRequest = 新しいリクエスト(request.url, {
    メソッド: request.method、
    ヘッダー: request.headers、
    本文: 新しい URLSearchParams(formData)
  });

  fetch(newRequest)を返します;
}

上の例では、Service Worker がフォームリクエストをインターセプトした後、フォームメンバーを追加し、fetch() を呼び出して変更されたリクエストをサーバーに送信します。

クローン()

clone() は HTTP リクエストオブジェクトをコピーするために使用されます。

const myRequest = 新しいリクエスト('flowers.jpg');
const newRequest = myRequest.clone();