Request: Request() コンストラクター

input

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

• 取得したいリソースの URL の入った文字列。 URL は、ベース URL に対する相対 URL である可能性があります。ベース URL とは、ウィンドウコンテキストでは文書内の baseURI、ワーカーコンテキストでは WorkerGlobalScope.location です。

• 効率的にコピーを作成するための Request オブジェクト。なお、コンストラクターが例外を発生させる可能性を下げるため、セキュリティーを保持するための以下の動作上の更新に注意してください。

  • このオブジェクトがコンストラクターの呼び出しとは別のオリジンに存在する場合、 Request.referrer が削除されます。
  • このオブジェクトの Request.mode が navigate である場合、 mode の値が same-origin に変換されます。

options 省略可

リクエストに適用したいカスタム設定が含まれている RequestInit オブジェクトです。

既存の 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"

TypeError

URL に http://user:password@example.com のように資格情報が入っていたり、解釈できなかったりした場合。

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() を呼び出すときに初期化オブジェクトを渡している以外は同じです。 この場合、 Cache-Control の値を設定して、どのようなキャッシュレスポンスなら許容できるかを示すことができます。

const myImage = document.querySelector("img");
const reqHeaders = new Headers();

// キャッシュされたレスポンスは、 1 週間以上経過していなければ OK。
reqHeaders.set("Cache-Control", "max-age=604800");

const options = {
  headers: reqHeaders,
};

// 初期値をヘッダーの "options" オブジェクトとして渡す
const req = new Request("flowers.jpg", options);

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

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

fetch(req, options).then((response) => {
  // ...
});

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

const options = {
  headers: {
    "Cache-Control": "max-age=60480",
  },
};

const req = new Request("flowers.jpg", options);

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

const copy = new Request(req);

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