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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応4214

39

341

522

なし

29

283

10
Streaming response body4314 なし なし2910
Support for blob: and data:48 なし ? なし ? ?
referrerPolicy52 あり ? なし39 ?
signal ? ?57 なし ? なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応424214

39

341

522

?10 ?
Streaming response body434314 なし なし10 ?
Support for blob: and data:4343 なし ? ? ? ?
referrerPolicy5252 ? ?39 ? ?
signal ? ? ?57 ? なし ?

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

2. fetch() now defined on WindowOrWorkerGlobalScope mixin.

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

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

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

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

関連情報

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

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