Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Fetch

fetch() は Window インターフェイスのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら履行されるプロミスを返します。

このプロミスは、そのリクエストに対するレスポンスを表す Response で解決します。

fetch() のプロミスは、ネットワークエラーが発生した場合（普通は権限の問題があったときなど）のみ拒否されます。 fetch() のプロミスは、サーバーがエラーを示す HTTP ステータスコード（404、504 など）を返しても拒否されません。 代わりに、 then() ハンドラーで Response.ok や Response.status プロパティをチェックする必要があります。

fetch() メソッドは取得するリソースのディレクティブではなく、コンテンツセキュリティポリシーの connect-src ディレクティブによって制御されます。

ネットワーク通信

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
fetch
42
14
39
10.1
42
10.3
authorization_removed_cross_origin

クロスオリジンリダイレクトから`Authorization`ヘッダーが削除されました
111
16.1
16.1
blob_data_support

blob: および data: のサポート
48
79
39
10.1
48
10.3
init_keepalive_parameter

`init.keepalive` パラメータ
66
15
133
13
66
13
init_referrerPolicy_parameter

`init.referrerPolicy` パラメータ
52
79
52
11.1
52
Headers

Headers はフェッチ API のインターフェイスで、 HTTP リクエスト／レスポンスヘッダー上のさまざまなアクションを実行します。アクションとしては、リクエストヘッダーのリストに対するヘッダーの取得、設定、追加、削除などがあります。
42
14
39
10.1
42
10.3
@@iterator

[シンボル.イテレータ］
42
16
44
10.1
42
10.3
append

append() は Headers インターフェイスのメソッドで、 Headers オブジェクト内の既存のヘッダーに新しい値を追加します。または、既存のヘッダーがない場合には、ヘッダーを追加します。
42
14
39
10.1
42
10.3
delete

delete() は Headers インターフェイスのメソッドで、現在の Headers オブジェクトからヘッダーを削除します。
42
14
39
10.1
42
10.3
entries

Headers.entries() メソッドは、このオブジェクトに含まれるすべてのキーと値のペアを走査するIteration_protocolsを返します。それぞれのペアのキーと値は両方とも String オブジェクトです。
42
16
44
10.1
42
10.3
forEach

Headers.forEach() メソッドは、 Headers オブジェクト内のキー/値の組にそれぞれ一度ずつ、コールバック関数を実行します。
42
14
47
10.1
42
10.3
get

get() は Headers インターフェイスのメソッドで、指定された名前の Headers オブジェクト内のヘッダーのすべての値のバイト文字列を返します。要求されたヘッダーが Headers オブジェクトに存在しない場合、null を返します。
42
14
39
10.1
42
10.3
getSetCookie

getSetCookie() は Headers インターフェイスのメソッドで、レスポンスに関連付けられたすべての Set-Cookie ヘッダーの値の入った配列を返します。これによって Headers オブジェクトは複数の Set-Cookie ヘッダーを扱えるようになります。
113
113
112
17
113
17
has

has() は Headers インターフェイスのメソッドで、 Headers オブジェクトに指定された特定のヘッダーがあるかどうかを示す論理値を返します。
42
14
39
10.1
42
10.3
Headers

Headers() コンストラクターは、新しい Headers オブジェクトを生成します。
42
14
39
10.1
42
10.3
iterate_combined_duplicates

反復処理により、重複するヘッダー名が結合されます
57
16
57
10.1
57
10.3
iterate_lexicographically

反復処理は辞書順に並べ替えられます
57
18
57
10.1
57
10.3
keys

Headers.keys() メソッドは、このオブジェクトに含まれるすべてのキーを読み取ることができるIteration_protocolsオブジェクトを返します。キーは文字列です。です。
42
16
44
10.1
42
10.3
set

set() は Headers インターフェイスのメソッドで、 Headers オブジェクトの中にある既存のヘッダーに新しい値を設定するか、ヘッダーがまだ存在しない場合には追加するかします。
42
14
39
10.1
42
10.3
values

Headers.values() メソッドは、このオブジェクトに含まれるすべての値を読み取ることができるIteration_protocolsを返します。値は文字列です。
42
16
44
10.1
42
10.3
Request

Request はフェッチ API のインターフェイスで、リソースのリクエストを表します。
42
14
39
10.1
42
10.3
arrayBuffer

arrayBuffer() は Request インターフェイスのメソッドで、リクエスト本体を読み込み、それを ArrayBuffer で解決するプロミスとして返します。
42
14
39
10.1
42
10.3
blob

blob() は Request インターフェイスのメソッドで、リクエスト本体を読み込み、それを Blob で解決するプロミスとして返します。
42
14
39
10.1
42
10.3
bodyUsed

bodyUsed は Request インターフェイスの読み取り専用プロパティで、リクエスト本体がまだ読み込まれていないかどうかを示す論理値です。
42
14
39
10.1
42
10.3
bytes

bytes() は Request インターフェイスのメソッドで、リクエスト本体を読み込み、Uint8Array で解決するプロミスとしてそれを返します。
132
132
128
18
132
18
cache

cache は Request インターフェイスの読み取り専用プロパティで、リクエストのキャッシュモードを保持します。リクエストがブラウザーの HTTP キャッシュ とどのように作用するかを制御します。
64
14
48
10.1
64
10.3
cache (only-if-cached)
64
79
50
10.1
64
10.3
clone

clone() は Request インターフェイスのメソッドで、現在の Request オブジェクトのコピーを生成します。
40
14
39
10.1
40
10.3
credentials

credentials は Request インターフェイスの読み取り専用プロパティで、credentials オプションで指定された Request.Request() コンストラクターの値を反映します。このプロパティは、ブラウザーがリクエストに資格情報を送信するかどうか、また、Set-Cookie レスポンスヘッダーが尊重されるかどうかを決定します。
40
14
39
10.1
40
10.3
credentials (default same-origin)

デフォルト値 `same-origin`
72
18
61
12.1
72
12.2
destination

destination は Request インターフェイスの読み取り専用プロパティで、リクエストされたコンテンツの種類を記述した文字列を返します。
65
14
61
10.1
65
10.3
duplex
実験的

duplex は Request インターフェイスの読み取り専用のプロパティで、全二重モードを返します。このモードは、ブラウザーがレスポンスを処理する前にリクエスト全体を送信する必要があるかどうかを決定します。
131
131
headers

headers は Request インターフェイスの読み取り専用プロパティで、リクエストに関連する Headers オブジェクトを保持します。
40
14
39
10.1
40
10.3
integrity

integrity は Request インターフェイスの読み取り専用プロパティで、このリクエストのサブリソース完全性の値を保持します。
46
14
51
10.1
46
10.3
isHistoryNavigation

isHistoryNavigation は Request インターフェイスの。読み取り専用プロパティで、このリクエストが履歴ナビゲーションであるかどうかを示す論理値です。
69
79
69
json

json() は Request インターフェイスのメソッドで、 このメソッドはリクエスト本体を読み込み、本文を解釈した結果を JSON として解決したプロミスとして返します。
42
14
39
10.1
42
10.3
keepalive

keepalive は Request インターフェイスの読み取り専用プロパティで、リクエストの keepalive 設定（true または false）が含まれており、これは、リクエストが完全に完了する前にそのリクエストを開始したページが読み込まれなくなった場合に、関連するリクエストをブラウザーが維持するかどうかを示します。
66
15
133
13
66
13
method

method は Request インターフェイスの読み取り専用プロパティで、このリクエストのメソッド（GET、POST など）を保持します。
40
14
39
10.1
40
10.3
mode

mode は Request インターフェイスの読み取り専用プロパティで、リクエストのモード（cors、no-cors、same-origin、navigate など）を保持します。これは、オリジン間リクエストに対して有効なレスポンスができるか、またレスポンスのプロパティが読み取り可能かどうかを判定するために使用されます。
40
14
39
10.1
40
10.3
mode (navigate mode)

`navigate` モード
49
≤18
46
10.1
49
10.3
redirect

redirect は Request インターフェイスの読み取り専用プロパティで、リダイレクトを処理する方法のモードを保持します。
46
14
43
10.1
46
10.3
referrer

referrer は Request インターフェイスの読み取り専用プロパティで、ユーザーエージェントによってリクエストのリファラーが設定されます（client や no-referrer、URL、など）。
40
14
39
10.1
40
10.3
referrerPolicy

referrerPolicy は Request インターフェイスの読み取り専用プロパティで、Referer ヘッダーで送信されるどのリファラー情報がリクエストに記載されるべきかを管理する、リファラーポリシーを返します。
52
14
47
10.1
52
10.3
Request

Request() コンストラクターは、新しい Request オブジェクトを生成します。
40
14
39
10.1
40
10.3
Request (cross origin stripped)

既存の `Request` オブジェクトからコンストラクタが作成された場合、クロスオリジンの `referrer` は削除され、`navigate` モードは `same-origin` に変換されます。
69
15
54
10.1
69
10.3
Request (init keepalive parameter)

`init.keepalive` パラメータ
66
15
133
13
66
13
Request (init referrer parameter)

`init.referrer` パラメータ
47
15
47
10.1
47
10.3
Request (request body readablestream)
実験的

リクエスト本文に `ReadableStream` を送信する
105
105
105
Request (response body readablestream)

`ReadableStream`をレスポンス本文として読み込む
43
79
65
43
10.3
text

text() は Request インターフェイスのメソッドで、リクエスト本体を読み込み、文字列で解決されるプロミスとして返します。 レスポンスは常に UTF-8 を使用してデコードされます。
42
14
39
10.1
42
10.3
url

url は Request インターフェイスの読み取り専用プロパティで、リクエストの URL を保持します。
40
14
39
10.1
40
10.3
Response

Response はフェッチ API のインターフェイスで、リクエストのレスポンスを表します。
42
14
39
10.1
42
10.3
arrayBuffer

arrayBuffer() は Response インターフェイスのメソッドで、Response を取り、終わりまで読み取ります。ArrayBuffer で解決されるプロミスを返します。
42
14
39
10.1
42
10.3
blob

blob() は Response インターフェイスのメソッドで、 Response ストリームを取得して完全に読み込みます。 Blob で解決するプロミスを返します。
42
14
39
10.1
42
10.3
body

body は Response インターフェイスの読み取り専用プロパティで、本体コンテンツの ReadableStream です。
43
14
65
10.1
43
10.3
body (readable byte stream)

`body` は読み取り可能なバイトストリームです
116
116
102
26.4
116
26.4
bodyUsed

bodyUsed は Response インターフェイスの読み取り専用プロパティで、本体が読み取り済みであるかどうかを示す論理値です。
42
14
39
10.1
42
10.3
bytes

bytes() は Response インターフェイスのメソッドで、Response を取り、終わりまで読み取ります。 Uint8Array で解決されるプロミスを返します。
132
132
128
18
132
18
clone

clone() は Response インターフェイスのメソッドで、レスポンスオブジェクトの複製を作成します。この複製はあらゆる面で同一ですが、異なる変数に格納されます。
40
14
39
10.1
40
10.3
error_static

error() は Response インターフェイスのメソッドで、ネットワークエラーに関連付けられた新しい Response オブジェクトを返します。
43
16
39
10.1
43
10.3
headers

headers は Response インターフェイスの読み取り専用プロパティで、このレスポンスに関連付けられた Headers オブジェクトが含まれています。
40
14
39
10.1
40
10.3
json

json() は Response インターフェイスのメソッドで、 Response のストリームを取得して完全に読み取ります。本体のテキストを JSON として解釈した結果で解決するプロミスを返します。
42
14
39
10.1
42
10.3
json_static

json() は Response インターフェイスの静的メソッドで、指定された JSON データを本体とし、Content-Type ヘッダーを application/json に設定したレスポンスを返します。 レスポンスステータス、ステータスメッセージ、追加のヘッダーも設定することができます。
105
105
115
17
105
17
ok

ok は Response インターフェイスの読み取り専用プロパティで、このレスポンスが（ステータスが 200-299 で）成功したかどうかを表す論理値です。
42
14
39
10.1
42
10.3
redirect_static

redirect() は Response インターフェイスのメソッドで、指定された URL へのリダイレクトをもたらす Response を返します。
44
16
39
10.1
44
10.3
redirected

redirected は Response インターフェイスの読み取り専用プロパティで、このレスポンスがリダイレクトされたリクエストの結果であるかどうかを示します。
57
16
49
10.1
57
10.3
Response

Response() コンストラクターは、新しい Response オブジェクトを生成します。
40
14
39
10.1
40
10.3
Response (accept readablestream)

body パラメータは ReadableByteStream を受け付けます
52
79
39
10.1
52
10.3
Response (body parameter optional)

`body` パラメータは省略可能です
40
79
59
10.1
40
10.3
status

status は Response インターフェイスの読み取り専用プロパティで、このレスポンスの HTTP ステータスコードを保持します。
40
14
39
10.1
40
10.3
statusText

statusText は Response インターフェイスの読み取り専用プロパティで、 Response.status にある HTTP ステータスコードに対応するステータスメッセージを保持します。
40
14
39
10.1
40
10.3
text

text() は Response インターフェイスのメソッドで、 Response ストリームを取得して完全に読み込みます。文字列で解決するプロミスを返します。 レスポンスは常に UTF-8 としてデコードされます。
42
14
39
10.1
42
10.3
type

type は Response インターフェイスの読み取り専用プロパティで、このレスポンスの種類を保持します。 以下のうちの何れかになります。
40
14
39
10.1
40
10.3
url

url は Response インターフェイスの読み取り専用プロパティで、このレスポンスの URL を保持します。 url プロパティの値は、あらゆるリダイレクトの後に得られる最終的な URL になります。
40
14
39
10.1
40
10.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • バージョン57以前では、`get()`は指定されたヘッダーの最初の値のみを返します。
注釈 1件
実装メモ
  • バージョン52以前では、`get()`は指定されたヘッダーの最初の値のみを返します。
注釈 1件
実装メモ
  • バージョン57以前では、`get()`は指定されたヘッダーの最初の値のみを返します。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (42)
実装メモ
  • サービスワーカーでのみ利用可能です。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (42)
実装メモ
  • サービスワーカーでのみ利用可能です。
注釈 1件
実装メモ
  • Chrome 47 以降、`init` 引数のプロパティのデフォルト値が変更されました。 `mode` のデフォルト値は `same-origin` になりました（以前は `no-cors` でした）。`credentials` のデフォルト値は `include` になりました（以前は `same-origin` でした）。`redirect` のデフォルト値は `follow` になりました（以前は `manual` でした）。
注釈 1件
実装メモ
  • Chrome Android 47 以降、`init` 引数のプロパティのデフォルト値が変更されました。 `mode` のデフォルト値は `same-origin` になりました（以前は `no-cors` でした）。`credentials` のデフォルト値は `include` になりました（以前は `same-origin` でした）。`redirect` のデフォルト値は `follow` になりました（以前は `manual` でした）。
注釈 1件
実装メモ
  • Chrome 59でFragmentのサポートが追加されました。
注釈 1件
実験的機能
  • Chrome Android 59でフラグメントのサポートが追加されました。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (42)
実装メモ
  • サービスワーカーでのみ利用可能です。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (42)
実装メモ
  • サービスワーカーでのみ利用可能です。

基本構文

JAVASCRIPT 
const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

window
  .fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

実務での使いどころ

  • Fetch の活用

    fetch() は Window インターフェイスのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら履行されるプロミスを返します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク