Fetch APIRequest インターフェイスは、リソースのリクエストを表します。

Request.Request() コンストラクタを使用することで、新しい Request オブジェクトを生成できますが、service worker の FetchEvent.request のような別の API 操作の結果として返される Request オブジェクトに遭遇することの方が多いでしょう。

コンストラクタ

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

プロパティ

Request.method 読取専用
リクエストメソッド(GETPOST など)を含む。
Request.url 読取専用
リクエストの URL を含む。
Request.headers 読取専用
リクエストの Headers に関連したオブジェクトを含む。
Request.context 読取専用  
リクエストのコンテクスト(たとえば、audioimageiframe など)を含む。
Request.referrer 読取専用
リクエストのリファラ( たとえば、client)を含む。
Request.referrerPolicy 読取専用
リファラに関するポリシー(例えば no-referrer)を含む。
Request.mode 読取専用
リクエストのモード( たとえば、cors、no-corssame-originnavigate)を含む。
Request.credentials 読取専用
リクエストのクレデンシャル( たとえば、omitsame-origin)を含む。
Request.redirect 読取専用
リダイレクトの処理方法のためのモードを含む。followerrormanual のいずれかである。
Request.integrity 読取専用
リクエストの subresource integrity 値( たとえば、sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)を含む。
Request.cache 読取専用
リクエストのキャッシュモード(たとえば、default、reload、no-cache)を含む。

Request は、Body を実装しているため、次のプロパティも利用可能です:

Body.body 読取専用
body コンテンツの ReadableStream として晒すのに使うシンプルなゲッター。
Body.bodyUsed 読取専用
response でボディが使われたかどうかを示す Boolean 値を保持する。

メソッド

Request.clone()
現在の Request オブジェクトのコピーを生成する。

RequestBody を実装しているため、次のメソッドも利用可能です:

Body.arrayBuffer()
リクエスト本体を表す ArrayBuffer が解決される Promise が返る。
Body.blob()
リクエスト本体を表す Blob が解決される Promise が返る。
Body.formData()
リクエスト本体を表す FormData が解決される Promise が返る。
Body.json()
リクエスト本体を表す JSON が解決される Promise が返る。
Body.text()
リクエスト本体を表す USVString が解決される Promise が返る。

付記: Body の関数は 1 度しか呼べません。2 回目以降は空の文字列、もしくは ArrayBuffer が解決されます。

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

const myRequest = new Request('http://localhost/flowers.jpg');

const myURL = myRequest.url; // http://localhost/flowers.jpg
const myMethod = myRequest.method; // GET
const myCred = myRequest.credentials; // omit

次に、GlobalFetch.fetch() の呼び出しパラメータとして Request オブジェクトを渡すことにで、このリクエストを取得できます。たとえば:

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

次のスニペットでは、初期化データとbodyコンテンツつきの Request() コンストラクタを使用して、bodyペイロードを必要とするAPIリクエストのための新しい request を生成します:

const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
 
const myURL = myRequest.url; // http://localhost/api
const myMethod = myRequest.method; // POST
const myCred = myRequest.credentials; // omit
const bodyUsed = myRequest.bodyUsed; // true

注: body タイプは Blob, BufferSource, FormData, URLSearchParams, USVString ReadableStream のいずれかで、ペイロードにそのオブジェクトを文字列化するのに必要な JSON オブジェクトでも同様です。

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

fetch(myRequest)
  .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);
  });

仕様

仕様 状態 コメント
Fetch
Request の定義
現行の標準 初期定義

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応42 あり39 なし28 なし
Request() constructor

42

411

15

39

342

なし

29

283

10.1
cache なし5 あり48 なし なし11
context42 — 46 ?39 — 426 なし28 — 29 なし
credentials

42

417

あり

39

342

なし

29

283

なし
destination651461 なし52 なし
headers

42

417

あり

39

342

なし

29

283

なし
integrity46 あり あり なし あり なし
keepalive6615 ? ?43 ?
method

42

417

あり

39

342

なし

29

283

なし
mode42 あり39 なし29 なし
redirect46 あり あり なし あり なし
referrer

42

417

あり47 なし

29

283

なし
referrerPolicy52 あり47 なし ? なし
url

42

417

あり

39

342

なし

29

283

なし
clone

42

417

あり

39

342

なし

29

283

なし
signal ?16 ? ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4242 あり あり28 なし4.0
Request() constructor

42

411

42

411

あり あり なし10.3

4.0

5.04

cache なし なし あり なし なし なし なし
context42 — 4642 — 46 ? なし なし なし4.0
credentials なし42 — 46 あり なし なし なし4.0
destination ?65 ?6152 なし ?
headers なし42 — 46 あり なし なし なし4.0
integrity なし46 あり なし あり なし5.0
keepalive なし66 ? ?43 ? なし
method なし42 — 46 あり なし なし なし4.0
mode4949 あり なし なし なし5.0
redirect なし46 あり あり あり なし5.0
referrer なし なし あり なし なし なし なし
referrerPolicy ? ? あり ? なし なし ?
url なし42 — 46 あり なし なし なし4.0
clone なし なし あり なし なし なし なし
signal ? ? ? ? ? ? ?

1. Some default values for the init parameter changed in Chrome 47. See the Properties section for details.

2. From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Experimental Web Platform Features preference.

4. Some default values for the init parameter changed in Samsung Internet 5.0. See the Properties section for details.

5. Nightly build

6. see bug 1188062 for more information.

7. From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

関連項目

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3, Sixeight, chikoski, YuichiNukiyama
最終更新者: Uemmra3,