フェッチ API
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
フェッチ API は(ネットワーク越しの通信を含む)リソース取得のためのインターフェイスを提供しています。 XMLHttpRequest
と似たものではありますが、より強力で柔軟な操作が可能です。
注: この機能は Web Worker 内で利用可能です。
概念と利用方法
フェッチでは、 Request
および Response
オブジェクト(およびネットワークリクエストに関わるその他のもの)の汎用的な定義が提供されています。これにより、サービスワーカー、キャッシュ API、リクエストやレスポンスを処理または変更するその他の類似のもの、またはプログラム的にレスポンスを生成する (つまり、コンピュータプログラムまたはパーソナルプログラミング命令を使用する) 必要があるあらゆる種類の利用法など、将来的に必要とされるあらゆる場所で使用できるようになります。
また CORS や HTTP の Origin ヘッダーの振る舞いといった関連した概念についても定義しています。この定義は、現行の分散している個別の定義を置き換えるものです。
リソースを取得するためのリクエストは、 fetch()
メソッドを呼ぶことで作成できます。このメソッドは Window
や WorkerGlobalScope
といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。
fetch()
メソッドは必須の引数を 1 つ取り、取得したいリソースのパスを指定します。これは Promise
を返します。これはサーバーがヘッダーで返答するとすぐに、サーバーレスポンスが HTTP エラーステータスであったとしても、 Response
に解決します。第 2 引数は任意で、 init
オプションオブジェクトを渡すことができます(Request
を参照してください)。
Response
を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります。
Request()
および Response()
を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、FetchEvent.respondWith()
のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。
jQuery との違い
fetch
は主に 3 つの点で jQuery.ajax()
と異なります。
fetch()
から返されたプロミスは、レスポンスが HTTP404
や500
であっても、 HTTP エラーステータスで拒否されません。代わりに、正常に解決され (ok
ステータスがfalse
に設定されます)、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。fetch()
は credentials の初期化オプションを(include
に)設定しない限り、オリジンをまたいだ Cookie を送信しません。- 2018 年 4 月、に仕様の既定の認証情報ポリシーが
'same-origin'
に変更され、古いネイティブの fetch が Firefox 61.0b13, Safari 12, Chrome 68 のバージョンのブラウザーで更新されました。 - これらのブラウザーより古いバージョンをターゲットにしている場合は、 Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに
'same-origin'
を初期化オプション に設定した認証情報を必ず含めてください。
- 2018 年 4 月、に仕様の既定の認証情報ポリシーが
フェッチの中止
未完了の fetch()
(または XMLHttpRequest
)の操作を中止するには、 AbortController
および AbortSignal
インターフェイスを使用してください。
Fetch インターフェイス
仕様書
Specification |
---|
Fetch Standard # fetch-method |
ブラウザーの互換性
BCD tables only load in the browser