Fetch API には (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスが定義されています。XMLHttpRequest と似たものではありますが、より強力で柔軟な操作が可能です。

概念と利用方法

Fetch では RequestResponse が一般的な形で定義されています。またネットワークリクエストに関連する様々なものも定義されています。これらは service worker や Cache API といった要求と応答を扱う API や、独自の要求を発生させる場面でも利用できるようになるでしょう。

また CORS や HTTP オリジンヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。

リソースを取得するための要求は、 GlobalFetch.fetch メソッドを呼ぶことで作成できます。このメソッドは WindowWorkerGlobalScope といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。

fetch() メソッドは必須の引数を1つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、要求に対する Response に解決できる Promise を返します。第2引数は任意で、 init オプションオブジェクトを渡すことができます。(Request をご覧ください)。

Response を受け取ると、応答に含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります(Body をご覧ください)。

Request() および Response() を利用することで、要求と応答を直接作成できます。ただしこれらのオブジェクトは、FetchEvent.respondWith のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。

: Fetch API の詳しい利用方法は  Using Fetch を参照してください。また Fetch basic concepts では、Fetch API の基本概念が解説されています。

取得の中止

ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる AbortController および AbortSignal インターフェイス(つまり Abort API)に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。

Fetch インターフェイス

fetch()
fetch() メソッドはリソース取得のために使用されます。
Headers
要求と応答のヘッダーを表現しています。ヘッダー情報への問い合わせや、結果による振る舞いの選択が可能です。
Request
リソースの要求を表します。
Response
要求に対する応答を表します。

Fetch ミックスイン

Body
応答と要求の本体に関係するメソッドが定義されています。これらを利用することで、コンテントタイプ自身と、コンテントタイプごとの処理を定めることが可能になります。

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 42Edge 完全対応 14Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.
完全対応 52
補足
補足 fetch() now defined on WindowOrWorkerGlobalScope mixin.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 完全対応 10WebView Android 完全対応 42Chrome Android 完全対応 42Edge Mobile 完全対応 14Firefox Android 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.
完全対応 52
補足
補足 fetch() now defined on WindowOrWorkerGlobalScope mixin.
Opera Android ? Safari iOS 完全対応 10Samsung Internet Android ?
Streaming response body
実験的
Chrome 完全対応 43Edge 完全対応 14Firefox 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the dom.streams.enabled preference and the javascript.options.streams preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29Safari 完全対応 10WebView Android 完全対応 43Chrome Android 完全対応 43Edge Mobile 完全対応 14Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 10Samsung Internet Android ?
Support for blob: and data:
実験的
Chrome 完全対応 48Edge 未対応 なしFirefox ? IE 未対応 なしOpera ? Safari ? WebView Android 完全対応 43Chrome Android 完全対応 43Edge 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 ?
signal
実験的
Chrome ? Edge ? Firefox 完全対応 57IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 57Opera Android ? Safari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

[1] この API は設定で実装されています。

[2] Firefox 52 以前では、 get() は特定のヘッダーの最初の値のみを返し、 getAll() がすべての値を返していました。52以降は、 get() がすべての値を返すようになり、 getAll() は削除されました。

[3] 読み取りできるストリームは Firefox で実装されていますが、 dom.streams.enabled および javascript.options.streams の設定が必要です。

関連情報

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

このページの貢献者: mfuji09, mdmss37, chikoski
最終更新者: mfuji09,