Request

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

新しい Request オブジェクトは Request.Request() コンストラクターを用いて生成することができますが、 Request オブジェクトは他の API 操作、例えばサービスワーカーの FetchEvent.request などの結果として返されたものに遭遇することの方が多いでしょう。

コンストラクター

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

プロパティ

Request.cache 読取専用
リクエストのキャッシュモード (default, reload, no-cache など) が入ります。
Request.context 読取専用
リクエストのコンテキスト (audio, image, iframe など) が入ります。
Request.credentials 読取専用
リクエストの認証情報 (omit, same-origin, include など) が入ります。既定値は same-origin です。
Request.destination 読取専用
RequestDestination 列挙型の文字列で、リクエストの方向を示します。これはその種類のコンテンツがリクエストされることを示す文字列です。
Request.headers 読取専用
リクエストに関連付けられた Headers オブジェクトが入ります。
Request.integrity 読取専用
リクエストの subresource integrity 値 (例えば sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=) が入ります。
Request.method 読取専用
リクエストメソッド (GET, POST など) が入ります。
Request.mode 読取専用
リクエストのモード ( cors, no-cors, same-origin, navigate など) が入ります。
Request.redirect 読取専用
リダイレクトをどう扱うかのモードが入ります。 follow, error, manual のいずれかです。
Request.referrer 読取専用
リクエストのリファラー (client など) が入ります。
Request.referrerPolicy 読取専用
リファラに関するポリシー (no-referrer など) が入ります。
Request.url 読取専用
リクエストの URL が入ります。

RequestBody を実装しているため、以下のプロパティを継承しています。

body 読取専用
body の中身を ReadableStream として取り出すために使用されるシンプルなゲッターです。
bodyUsed 読取専用
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 request = new Request('https://www.mozilla.org/favicon.ico');

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

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

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

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

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, BufferSource, FormData, URLSearchParams, USVString ReadableStream のいずれかで、ペイロードにそのオブジェクトを文字列化するのに必要な JSON オブジェクトでも同様です。

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

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);
  });

仕様書

仕様書 状態 備考
Fetch
Request の定義
現行の標準 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Request
実験的
Chrome 完全対応 42
完全対応 42
完全対応 41
無効
無効 From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ≤18Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 28Safari 完全対応 10.1WebView Android 完全対応 42Chrome Android 完全対応 42
完全対応 42
完全対応 41
無効
無効 From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 完全対応 28Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
Request() constructor
実験的
Chrome 完全対応 41
補足
完全対応 41
補足
補足 From Chrome 47, default values for the init argument's properties changed. mode defaults to same-origin (from no-cors). credentials defaults to include (from same-origin). redirect defaults to follow (from manual).
Edge 完全対応 15Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 完全対応 10.1WebView Android 完全対応 42
補足
完全対応 42
補足
補足 From WebView 47, default values for the init argument's properties changed. mode defaults to same-origin (from no-cors). credentials defaults to include (from same-origin). redirect defaults to follow (from manual).
Chrome Android 完全対応 41
補足
完全対応 41
補足
補足 From Chrome 47, default values for the init argument's properties changed. mode defaults to same-origin (from no-cors). credentials defaults to include (from same-origin). redirect defaults to follow (from manual).
Firefox Android 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
完全対応 4.0
完全対応 5.0
補足
補足 Some default values for the init parameter changed in Samsung Internet 5.0. See the Properties section for details.
cache
実験的
Chrome 完全対応 64Edge 完全対応 14Firefox 完全対応 48IE 未対応 なしOpera 完全対応 51Safari 完全対応 11WebView Android 完全対応 64Chrome Android 完全対応 64Firefox Android 未対応 なしOpera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 9.0
clone
実験的
Chrome 完全対応 42
完全対応 42
完全対応 41
無効
無効 From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 14Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
context
実験的非推奨非標準
Chrome 未対応 42 — 46Edge ? Firefox 未対応 39 — 42
補足
未対応 39 — 42
補足
補足 see bug 1188062 for more information.
IE 未対応 なしOpera 未対応 28 — 29Safari 未対応 なしWebView Android 未対応 42 — 46Chrome Android 未対応 42 — 46Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 4.0 — 5.0
credentials
実験的
Chrome 完全対応 42
完全対応 42
完全対応 41
無効
無効 From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 14Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 未対応 なしWebView Android 完全対応 42Chrome Android 完全対応 42Firefox Android 未対応 なしOpera Android 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
destination
実験的
Chrome 完全対応 65Edge 完全対応 14Firefox 完全対応 61IE 未対応 なしOpera 完全対応 52Safari 完全対応 10.1WebView Android 完全対応 65Chrome Android 完全対応 65Firefox Android 完全対応 61Opera Android 完全対応 47Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 9.0
headers
実験的
Chrome 完全対応 42
完全対応 42
完全対応 41
無効
無効 From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 14Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 42 — 46Firefox Android 未対応 なしOpera Android 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS 未対応 なしSamsung Internet Android 未対応 4.0 — 5.0
integrity
実験的
Chrome 完全対応 46Edge 完全対応 14Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 46Firefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
keepalive
実験的
Chrome 完全対応 66Edge 完全対応 15Firefox ? IE 未対応 なしOpera 完全対応 43Safari 未対応 なしWebView Android 完全対応 66Chrome Android 完全対応 66Firefox Android ? Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 9.0
method
実験的
Chrome 完全対応 42
完全対応 42
完全対応 41
無効
無効 From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 14Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 42 — 46Firefox Android 未対応 なしOpera Android 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS 未対応 なしSamsung Internet Android 未対応 4.0 — 5.0
mode
実験的
Chrome 完全対応 42Edge 完全対応 14Firefox 完全対応 39IE 未対応 なしOpera 完全対応 29Safari 未対応 なしWebView Android 完全対応 49Chrome Android 完全対応 49Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
redirect
実験的
Chrome 完全対応 46Edge 完全対応 14Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 46Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
referrer
実験的
Chrome 完全対応 42
完全対応 42
完全対応 41
無効
無効 From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 14Firefox 完全対応 47IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
referrerPolicyChrome 完全対応 52Edge 完全対応 14Firefox 完全対応 52IE 未対応 なしOpera 完全対応 39Safari 完全対応 11.1WebView Android 完全対応 52Chrome Android 完全対応 52Firefox Android 完全対応 52Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.2
signalChrome 完全対応 66Edge 完全対応 16Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 完全対応 66Chrome Android 完全対応 66Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 9.0
url
実験的
Chrome 完全対応 42
補足
完全対応 42
補足
補足 Fragment support added in Chrome 59.
Edge 完全対応 14Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29
補足
完全対応 29
補足
補足 Fragment support added in Opera 46.
Safari 完全対応 10.1WebView Android 完全対応 42
補足
完全対応 42
補足
補足 Fragment support added in Chrome 59.
Chrome Android 完全対応 42
補足
完全対応 42
補足
補足 Fragment support added in Chrome 59.
Firefox Android 未対応 なしOpera Android 完全対応 29
補足
完全対応 29
補足
補足 Fragment support added in Opera 46.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
補足
完全対応 4.0
補足
補足 Fragment support added in Samsung Internet 7.0.

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報