Request()
=========

**`Request()`** コンストラクターは、新しい `Request` オブジェクトを生成します。

構文
--


```js
new Request(input)
new Request(input, options)
```

### 引数

`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"
```


エラー
---

| 型 | 説明 |
| --- | --- |
| `TypeError` | Firefox 43 以降、 `Request()` は http://user:password@example.com のような認証情報を含む URL の場合に TypeError を発生させます。 |

例
-

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


```js
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()` を呼び出すときに初期化オブジェクトを渡している以外は同じです。


```js
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` 呼び出しに初期化オブジェクトを渡せることにも注目してください。例えば次の通りです。


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


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


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

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


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


```js
const copy = new Request(myRequest);
```


**メモ:** 最後の使い方はサービスワーカー内でのみ使用できます。

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

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