Request

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2017年3月⁩.

* Some parts of this feature may have varying levels of support.

メモ: この機能はウェブワーカー内で利用可能です。

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

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

コンストラクター

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

プロパティ

Request.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 読取専用: リクエストのサブリソース完全性の値を保持します(sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE= など)。
Request.isHistoryNavigation 読取専用: 論理値で、このリクエストが履歴のナビゲーションであるかどうかを示します。
Request.keepalive 読取専用: リクエストの keepalive 設定(true または false)が入ります。これは、リクエストが完全に完了する前に開始ページが読み込まれなかった場合に、ブラウザーが関連付けられたリクエストを維持するかどうかを示します。
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.signal 読取専用: リクエストに関連付けられた AbortSignal を返します。
Request.url 読取専用: リクエストの URL が入ります。

メソッド

Request.arrayBuffer(): リクエストの本体の ArrayBuffer 表現で解決するプロミスを返します。
Request.blob(): リクエストの本体の Blob 表現で解決するプロミスを返します。
Request.bytes(): リクエスト本体の Uint8Array 表現で解決するプロミスを返します。
Request.clone(): 現在の Request オブジェクトのコピーを生成します。
Request.formData(): リクエストの本体の FormData 表現で解決するプロミスを返します。
Request.json(): リクエストの本体を JSON で解釈した結果で解決するプロミスを返します。
Request.text(): リクエストの本体のテキスト表現で解決するプロミスを返します。

メモ: リクエスト本体の機能は一度しか実行することができません。それ以降の呼び出しは、TypeError で拒否され、本体ストリームがすでに使用されていることを示すエラーが表示されます。

例

次のスニペットでは、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 オブジェクトを引数として 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, ArrayBuffer, TypedArray, DataView, FormData, URLSearchParams, ReadableStream, String オブジェクトのいずれか、および文字列リテラルのみですので、 JSON オブジェクトを本体に追加するには、そのオブジェクトの文字列化をする必要があります。

すると Request オブジェクトを、例えば fetch() 呼び出しの引数として渡すことで API リクエストを取得できて、レスポンスを取得できます。

fetch(request)
 .then((response) => {
 if (response.status === 200) {
 return response.json();
 } else {
 throw new Error("API サーバーで問題が発生しました。");
 }
 })
 .then((response) => {
 console.debug(response);
 // ...
 })
 .catch((error) => {
 console.error(error);
 });