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 の定義
現行の標準 初期定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 42Edge 完全対応 ありFirefox 完全対応 39IE 未対応 なしOpera 完全対応 28Safari 未対応 なしWebView Android 完全対応 42Chrome Android 完全対応 42Edge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 28Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
Request() constructor
実験的
Chrome 完全対応 42
完全対応 42
完全対応 41
補足
補足 Some default values for the init parameter changed in Chrome 47. See the Properties section for details.
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
完全対応 41
補足
補足 Some default values for the init parameter changed in Chrome 47. See the Properties section for details.
Chrome Android 完全対応 42
完全対応 42
完全対応 41
補足
補足 Some default values for the init parameter changed in Chrome 47. See the Properties section for details.
Edge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 未対応 なし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 未対応 なし
補足
未対応 なし
補足
補足 Nightly build
Edge 完全対応 ありFirefox 完全対応 48IE 未対応 なしOpera 未対応 なしSafari 完全対応 11WebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
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 完全対応 ありFirefox 完全対応 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 未対応 なしEdge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なし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 — 46Edge Mobile ? Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 4.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 完全対応 ありFirefox 完全対応 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 — 46Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
destination
実験的
Chrome 完全対応 65Edge 完全対応 14Firefox 完全対応 61IE 未対応 なしOpera 完全対応 52Safari 未対応 なしWebView Android ? Chrome Android 完全対応 65Edge Mobile ? Firefox Android 完全対応 61Opera Android 完全対応 52Safari iOS 未対応 なしSamsung Internet Android ?
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 完全対応 ありFirefox 完全対応 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 — 46Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
integrity
実験的非推奨
Chrome 完全対応 46Edge 完全対応 ありFirefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 46Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
keepalive
実験的非推奨
Chrome 完全対応 66Edge 完全対応 15Firefox ? IE ? Opera 完全対応 43Safari ? WebView Android 未対応 なしChrome Android 完全対応 66Edge Mobile ? Firefox Android ? Opera Android 完全対応 43Safari iOS ? Samsung Internet Android 未対応 なし
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 完全対応 ありFirefox 完全対応 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 — 46Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
mode
実験的
Chrome 完全対応 42Edge 完全対応 ありFirefox 完全対応 39IE 未対応 なしOpera 完全対応 29Safari 未対応 なしWebView Android 完全対応 49Chrome Android 完全対応 49Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
redirect
実験的
Chrome 完全対応 46Edge 完全対応 ありFirefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 46Edge Mobile 完全対応 ありFirefox 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 完全対応 ありFirefox 完全対応 47IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
referrerPolicyChrome 完全対応 52Edge 未対応 なしFirefox 完全対応 52IE 未対応 なしOpera 完全対応 39Safari 完全対応 11.1WebView Android 完全対応 52Chrome Android 完全対応 52Edge Mobile 未対応 なしFirefox Android 完全対応 52Opera Android 完全対応 39Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.2
signalChrome ? Edge 完全対応 16Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
url
実験的
Chrome 完全対応 42
補足
完全対応 42
補足
補足 Fragment support added in Chrome 59.
Edge 完全対応 ありFirefox 完全対応 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 未対応 なしWebView Android 完全対応 42
補足
完全対応 42
補足
補足 Fragment support added in Chrome 59.
Chrome Android 完全対応 42
補足
完全対応 42
補足
補足 Fragment support added in Chrome 59.
Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 29
補足
完全対応 29
補足
補足 Fragment support added in Opera 46.
Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0

凡例

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

関連項目

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

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