--- title: Fetch API slug: Web/API/Fetch_API tags: - API - Experimental - Fetch - Landing - Reference - XMLHttpRequest - リクエスト - レスポンス translation_of: Web/API/Fetch_API ---
Fetch API には (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスが定義されています。{{domxref("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。
Fetch では {{domxref("Request")}} と {{domxref("Response")}} が一般的な形で定義されています。またネットワークリクエストに関連する様々なものも定義されています。これらは service worker や Cache API といったリクエストとレスポンスを扱う API や、独自のリクエストを発生させる場面でも利用できるようになるでしょう。
また CORS や HTTP オリジンヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。
リソースを取得するためのリクエストは、 {{domxref("GlobalFetch.fetch")}} メソッドを呼ぶことで作成できます。このメソッドは {{domxref("Window")}} や {{domxref("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。
fetch()
メソッドは必須の引数を1つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{domxref("Response")}} に解決できる {{domxref("Promise")}} を返します。第2引数は任意で、 init
オプションオブジェクトを渡すことができます。({{domxref("Request")}} をご覧ください)。
{{domxref("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります({{domxref("Body")}} をご覧ください)。
{{domxref("Request.Request","Request()")}} および {{domxref("Response.Response","Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{domxref("FetchEvent.respondWith")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。
fetch
は主に3つの点で jQuery.ajax()
と異なります。
fetch()
から返された Promise は、応答が HTTP 404
または 500
であっても、HTTP エラーステータスで拒否されません。代わりに、正常に解決され(ok
ステータスが false
に設定されます)、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。fetch()
は クロスサイト Cookie を受信Set-Cookie
ヘッダーは黙って無視されます。認証情報: 'same-origin'
を設定しない限り、fetch()
は Cookie を送信しません。
'same-origin'
に変更され、古いネイティブ fetch が以下のブラウザのバージョンで更新されました。
'same-origin'
init オプション の認証情報を必ず含めてください。注: Fetch API の詳しい利用方法は Using Fetch を参照してください。また Fetch basic concepts では、Fetch API の基本概念が解説されています。
ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる {{domxref("AbortController")}} および {{domxref("AbortSignal")}} インターフェイス(つまり Abort API)に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。
fetch()
メソッドはリソース取得のために使用されます。仕様書 | 状態 | 備考 |
---|---|---|
{{SpecName('Fetch')}} | {{Spec2('Fetch')}} | 初回定義 |
{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}