Request
=======

**`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.method` 読取専用 

リクエストメソッド (`GET`, `POST` など) を保持します。

`Request.mode` 読取専用 

リクエストのモード ( `cors`, `no-cors`, `same-origin`, `navigate` など) を保持します。

`Request.priority` 読取専用  
Experimental

このリクエストの優先度のヒント（`high`, `low`, `auto` など）を保持します。

`Request.redirect` 読取専用 

リダイレクトをどう扱うかのモードが入ります。 `follow`, `error`, `manual` のいずれかです。

`Request.referrer` 読取専用 

リクエストのリファラー (`client` など) が入ります。

`Request.referrerPolicy` 読取専用 

リファラに関するポリシー (`no-referrer` など) が入ります。

`Request.url` 読取専用 

リクエストの URL が入ります。

メソッド
----

`Request.arrayBuffer()`

リクエストの本体の `ArrayBuffer` 表現で解決するプロミスを返します。

`Request.blob()`

リクエストの本体の `Blob` 表現で解決するプロミスを返します。

`Request.clone()`

現在の `Request` オブジェクトのコピーを生成します。

`Request.formData()`

リクエストの本体の `FormData` 表現で解決するプロミスを返します。

`Request.json()`

リクエストの本体を `JSON` で解釈した結果で解決するプロミスを返します。

`Request.text()`

リクエストの本体のテキスト表現で解決するプロミスを返します。


**メモ:** リクエストの本体の関数は 1 度しか呼び出せません。 2 回目以降は空の文字列または ArrayBuffer で解決します。

例
-

次のスニペットでは、`Request()` コンストラクターを使用して (スクリプトと同じディレクトリーにある画像ファイルのために) 新しい request を生成し、いくつかリクエストのプロパティ値を返しています。


```js
const request = new Request("https://www.mozilla.org/favicon.ico");

const url = request.url;
const method = request.method;
const credentials = request.credentials;
```


このリクエストは、下記のように `Request` オブジェクトを引数として `fetch()` に渡すことで読み取ることができます。


```js
fetch(request)
  .then((response) => response.blob())
  .then((blob) => {
    image.src = URL.createObjectURL(blob);
  });
```


以下のスニペットでは、 `Request()` コンストラクターにいくつかの初期化データと本体コンテンツを付けて、本体ペイロードを必要とする API リクエストのための新しいリクエストを生成します。


```js
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 リクエストを取得できて、レスポンスを取得できます。


```js
fetch(request)
  .then((response) => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error("Something went wrong on API server!");
    }
  })
  .then((response) => {
    console.debug(response);
    // …
  })
  .catch((error) => {
    console.error(error);
  });
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # request-class |

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

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

関連情報
----

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