Fetch API

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 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。

jQueryとの違い

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

  • fetch() から返された Promise は、応答が HTTP 404 または 500 であっても、HTTP エラーステータスで拒否されません。代わりに、正常に解決され(ok ステータスが false に設定されます)、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。
  • fetch()クロスサイト Cookie を受信できません。フェッチを使用してクロスサイトセッションを確立することはできません他のサイトの Set-Cookie ヘッダーは黙って無視されます。
  • 認証情報: 'same-origin' を設定しない限り、fetch()Cookie を送信しません
    • 2017年8月、仕様によりデフォルトの認証情報ポリシーが 'same-origin' に変更され、古いネイティブ fetch が以下のブラウザのバージョンで更新されました。
      • Firefox バージョン 61.0b13
      • Safari バージョン 12
      • Chrome バージョン 68
    • これらのブラウザより古いバージョンをターゲットにしている場合は、Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに 'same-origin' init オプション の認証情報を必ず含めてください。

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

フェッチを中止する

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

Fetch インターフェイス

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

Fetch ミックスイン

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

仕様書

仕様書 状態 備考
Fetch 現行の標準 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報