--- title: Fetch API slug: Web/API/Fetch_API tags: - API - Experimental - Fetch - Landing - Reference - XMLHttpRequest - リクエスト - レスポンス translation_of: Web/API/Fetch_API ---
{{DefaultAPISidebar("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 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。

jQueryとの違い

fetch は主に3つの点で jQuery.ajax() と異なります。

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

フェッチを中止する

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

Fetch インターフェイス

{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
fetch() メソッドはリソース取得のために使用されます。
{{domxref("Headers")}}
リクエストとレスポンスのヘッダーを表現しています。ヘッダー情報への問い合わせや、結果による振る舞いの選択が可能です。
{{domxref("Request")}}
リソースのリクエストを表します。
{{domxref("Response")}}
リクエストに対するレスポンスを表します。

Fetch ミックスイン

{{domxref("Body")}}
レスポンスとリクエストの本体に関係するメソッドが定義されています。これらを利用することで、コンテントタイプ自身と、コンテントタイプごとの処理を定めることが可能になります。

仕様書

仕様書 状態 備考
{{SpecName('Fetch')}} {{Spec2('Fetch')}} 初回定義

ブラウザーの互換性

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

関連情報