We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) IE Opera Safari (WebKit)
基本機能 42 14 39 (39)
34[1]
52 (52)[2]
未サポート 29
28[1]
10.1
ReadableStream response body 43 14 未サポート[3] 未サポート ? 未サポート
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 42 42 (有) (有) 未サポート 未サポート 10.1
ReadableStream response body 43 43 (有) 未サポート[3] 未サポート ? 未サポート

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

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

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

関連項目

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

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