fetch()

resource

取得したいリソースを定義します。以下のどちらかが使用できます。

• 文字列または文字列化できるその他のオブジェクト（URL オブジェクトを含む）。取得したいリソースの直接の URL を含む文字列です。
• Request オブジェクト。

options 省略可

リクエストに適用したいカスタム設定を含むオブジェクト。可能なオプションは以下の通りです。

method

リクエストするメソッド、GET、POST など。なお、 Origin ヘッダーは HEAD または GET メソッドの読み取りリクエストでは設定されません。 (この動作は Firefox 65 で修正されました。 Firefox バグ 1508661 を参照)

headers

リクエストに追加したいヘッダーで、 Headers オブジェクトまたは String 値を持つオブジェクトリテラルで指定してください。なお、一部の名前は禁止されています。

body

リクエストに追加したい本体です。これには Blob, ArrayBuffer, TypedArray, DataView, FormData, URLSearchParams, 文字列オブジェクトまたはリテラル、 ReadableStream オブジェクトなどが使用できます。これは最新の利用可能状況で、まだ実験的なものです。互換性情報を調べて、あなたがこれを使用できるかどうかを確認してください。メソッドが GET や HEAD の場合は使用できないので注意してください。

mode

リクエストで使用するモードです。例: cors, no-cors, same-origin

credentials

ブラウザーが資格情報を使用して何を行うか（クッキー、 HTTP 認証項目、 TLS クライアント証明書）を制御します。以下の文字列のうちの何れかでなければなりません。

omit

リクエストから資格情報を除外し、レスポンスで返される資格情報（Set-Cookie ヘッダーなど）を無視するようブラウザーに指示します。

same-origin

同一オリジンの URL へのリクエストに資格情報を記載し、同一オリジンの URL からのレスポンスで送り返されるすべての資格情報を使用するようブラウザーに指示します。これが既定値です。

include

ブラウザーに、同一オリジンおよびオリジン間リクエストの両方に資格情報を記載し、レスポンスで送り返された資格情報を常に使用するように指示します。

メモ: 資格情報は単純な、そして「最終的な」オリジン間リクエストに記載することができますが、 CORS プリフライトリクエストには記載されるべきではありません。

cache

文字列で、このリクエストがブラウザーの HTTP キャッシュにどう作用するかを示します。利用可能な値は default, no-store, reload, no-cache, force-cache, only-if-cached で、 Request オブジェクトの cache プロパティの記事に記述されています。

redirect

リダイレクトレスポンスを取り扱う方法を示します。

• follow: 自動的にリダイレクトに従います。他の方法が指定されていない限り、リダイレクトモードは follow に設定されます。
• error: リダイレクトが発生した場合は、エラーで中止します。
• manual: 呼び出し側は、レスポンスを別のコンテキストで処理する予定です。 詳しくは WHATWG fetch standard を参照してください。

referrer

文字列で、リクエストのリファラーを指定します。これは同じオリジンの URL、 about:client、空文字列のいずれかを取ることができます。

referrerPolicy

リクエストで使用するリファラーポリシーを指定します。使用可能な値は、 no-referrer, no-referrer-when-downgrade, same-origin, origin, strict-origin, origin-when-cross-origin, strict-origin-when-cross-origin, unsafe-url のいずれかです。

integrity

リクエストのサブリソース完全性の値を保持します（sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE= など）。

keepalive

keepalive オプションは、ページの終了後のリクエストを許可するのに使用されます。keepalive フラグつきのフェッチは Navigator.sendBeacon() API の置き換えです。

signal

AbortSignal オブジェクトのインスタンスです。つまり AbortController 経由でフェッチリクエストと通信したり望む場合には中止したりできます。

Promise で、 Response オブジェクトに解決します。

AbortError DOMException

AbortController の abort() メソッドの呼び出しによりリクエストが中止された。

TypeError

以下の理由で発生します。

// "C ontent-Type" に空白がある
const headers = {
  'C ontent-Type': 'text/xml',
  'Breaking-Bad': '<3',
};
fetch('https://example.com/', { headers });
        

const headers = [
  ['Content-Type', 'text/html', 'extra'],
  ['Accept'],
];
fetch('https://example.com/', { headers });
        

fetch('blob://example.com/', { mode: 'cors' });
        

fetch('https://user:password@example.com/');
        

fetch('https://example.com/', { referrer: './abc\u0000df' });
        

fetch('https://example.com/', { mode: 'navigate' });
        

fetch('https://example.com/', {
  cache: 'only-if-cached',
  mode: 'no-cors',
});
        

fetch('https://example.com/', { method: 'CONNECT' });
        

fetch('https://example.com/', {
  method: 'CONNECT',
  mode: 'no-cors',
});
        

fetch('https://example.com/', {
  method: 'GET',
  body: new FormData(),
});
        

Fetch Request の例（Fetch Request のライブ版を参照）では、 Request オブジェクトを関連するコンストラクターで作成しています。その後で fetch() を呼び出して取得しています。画像を読み取っているため、レスポンスで Response.blob() を実行して正しい MIME タイプを指定して正しく扱われるようにし、オブジェクト URL を作成して <img> 要素に追加して表示させています。

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

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

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 with init then Request の例（Fetch Request init のライブ版) では上記の内容に加えて、fetch() を呼び出すとき、初期化オブジェクト init を渡しています。

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

const myHeaders = new Headers();
myHeaders.append("Accept", "image/jpeg");

const myInit = {
  method: "GET",
  headers: myHeaders,
  mode: "cors",
  cache: "default",
};

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

fetch(myRequest, myInit).then((response) => {
  // …
});

同様に init オブジェクトを Request コンストラクターに渡しても、同じ効果が得られます。

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

init の headers でオブジェクトリテラルを使用することもできます。

const myInit = {
  method: "GET",
  headers: {
    Accept: "image/jpeg",
  },
  mode: "cors",
  cache: "default",
};

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

• フェッチ API
• サービスワーカー API
• HTTP アクセス制御 (CORS)
• HTTP