Request()

input

取得したいリソースを定義します。次のいずれかの値を取ります。

• 取得したいリソースの直接の URL を含む文字列。
• 効率的にコピーを作成するための Request オブジェクト。なお、コンストラクターが例外を発生させる可能性を下げるため、セキュリティーを保持するための以下の動作上の更新に注意してください。
  • このオブジェクトがコンストラクターの呼び出しとは別のオリジンに存在する場合、 Request.referrer が削除されます。
  • このオブジェクトの Request.mode が navigate である場合、 mode の値が same-origin に変換されます。

options 省略可

リクエストに適用するカスタム設定を含むオプションオブジェクトです。設定可能なオプションは次の通りです。

method

リクエストメソッド、 GET, POST など。

headers

Headers オブジェクトまたは String を含む、リクエストに追加するヘッダーです。

body

リクエストに追加する本体で、 Blob, ArrayBuffer, TypedArray, DataView, FormData, URLSearchParams, 文字列、 ReadableStream オブジェクトが使用できます。 なお、リクエストが GET または HEAD メソッドを使用している場合、本体を持てません。

mode

リクエストで使用するモード。例えば、 cors, no-cors, same-origin, navigate です。既定値は cors です。

credentials

リクエストで使用するリクエストの資格情報です。 omit, same-origin, include の何れかです。既定値は same-origin です。

cache

リクエストで使用するキャッシュモードです。

redirect

使用するリダイレクトモードです。 follow, error, manual の何れかです。

referrer

文字列で、 no-referrer, client または URL を示します。既定値は client です。

referrerPolicy

特定のアクション（サブリソースのフェッチ、 先読み、ナビゲーションの実行など）の際に、リファラーヘッダーがどのように入力されるかを変更する文字列です。

integrity

リクエストのサブリソースの完全性の値です（sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE= など）。

keepalive

論理値で、複数のリクエストや レスポンスに対して持続的な接続を行うかどうかを示します。

signal

AbortSignal オブジェクトで、リクエストの通信/中止を行うために使用することができます。

既存の Request から新しい Request を作成する場合、新しいリクエストの options 引数に設定したオプションは、元の Request に設定された対応するオプションを置き換えます。例えば次の通りです。

js

const oldRequest = new Request(
  "https://github.com/mdn/content/issues/12959",
  { headers: { From: "webmaster@example.org" } },
);
oldRequest.headers.get("From"); // "webmaster@example.org"
const newRequest = new Request(oldRequest, {
  headers: { From: "developer@example.org" },
});
newRequest.headers.get("From"); // "developer@example.org"

Fetch Request の例 (Fetch Request のライブ版 を参照) では、コンストラクターを使用して新しいリクエストオブジェクトを生成してから、 fetch() 呼び出しを使用して取得しています。画像を取得してから、それを適切に処理できるように MIME タイプを設定するため、レスポンスの Response.blob を実行しています。それから、オブジェクト URL を生成して、 <img> 要素に表示しています。

const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => response.blob())
  .then((response) => {
    const objectURL = URL.createObjectURL(response);
    myImage.src = objectURL;
  });

Fetch Request with init の例 (Fetch Request init のライブ版 を参照) では、 fetch() を呼び出すときに初期化オブジェクトを渡している以外は同じです。

const myImage = document.querySelector("img");

const myHeaders = new Headers();
myHeaders.append("Content-Type", "image/jpeg");

const myOptions = {
  method: "GET",
  headers: myHeaders,
  mode: "cors",
  cache: "default",
};

const myRequest = new Request("flowers.jpg", myOptions);

fetch(myRequest).then((response) => {
  // ...
});

同様の効果を得るために、 fetch 呼び出しに初期化オブジェクトを渡せることにも注目してください。例えば次の通りです。

fetch(myRequest, myOptions).then((response) => {
  // ...
});

myOptions の中の headers としてオブジェクトリテラルを使用することもできます。

const myOptions = {
  method: "GET",
  headers: {
    "Content-Type": "image/jpeg",
  },
  mode: "cors",
  cache: "default",
};

const myRequest = new Request("flowers.jpg", myOptions);

リクエストのコピーを作成するために、 Request オブジェクトを Request() コンストラクターに渡すこともできます（これは clone() メソッドを呼び出すのと似ています）。

const copy = new Request(myRequest);

• サービスワーカー API
• HTTP アクセス制御 (CORS)
• HTTP