GlobalFetch.fetch()

GlobalFetch interfaceのfetch()メソッドはリソースのfetchを開始します。 これは fetchのレスポンスを表すResponseオブジェクトのPromiseを返します。

GlobalFetchは Window や WorkerGlobalScope の両方で実装されています。つまりfetch()メソッドは もうすぐあなたがfetchしたいと思った大半のコンテキストで使用可能になります。

fetch() のpromiseはネットワークエラーの場合 TypeError としてreject状態になるでしょう。しかし TypeError は普通パーミッションの問題やそれに似た問題で発生します。fetch()が成功の為の精密なチェックとしてpromiseがresolvedかどうかを確認しResponse.okプロパティがtureかどうかを確認します。 HTTP statusコードが404の場合はネットワークエラーではありません。

fetch()メソッドは取得するリソースのディレクティブではなく Content Security Policy のconnect-src ディレクティブによって制御されます。

構文

fetch(input, init).then(function(response) { ... });

引数

input

あなたがfetchしたいリソースを定義します。以下の2つが使用出来ます。

• あなたがfetchしたいURLを含む USVString
• A Requestオブジェクト。

init Optional

あなたがリクエストに適用したい設定を含むオプションの（必須ではない）オブジェクトです。以下のオプションが使用できます。

• method: リクエストするメソッド, GET, POSTなど。
• headers :あなたがリクエストに追加したいヘッダー、 Headers オブジェクトか ByteStringで指定して下さい。
• body: あなたがリクエストに追加したいbody、 Blob, BufferSource, FormData, URLSearchParams, or USVString オブジェクトなどが使えます。methodがGETやHEADの場合使用できないので注意して下さい。
• mode: あなたがリクエストで使いたいモードです。例：cors, no-cors, or same-origin.
• credentials: The request credentials you want to use for the request: omit, same-origin, or include. To automatically send cookies for the current domain, this option must be provided.
• cache:あなたが使用したいリクエストのキャッシュのモードを指定できます。: 通常は, no-store, reload, no-cache, force-cache, only-if-cached.
• redirect: The redirect mode to use: follow (automatically follow redirects), error (abort with an error if a redirect occurs), or manual (handle redirects manually). In Chrome the default was follow before Chrome 47 and manual starting with Chrome 47.
• referrer: A USVString specifying no-referrer, client, or a URL. The default is client.
• referrerPolicy: Specifies the value of the referer HTTP header. May be one of no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url.
• integrity: Contains the subresource integrity value of the request (e.g., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

返り値

解決時に Response オブジェクトを取得できる Promise オブジェクト。

例外

例

 Fetch Request example リポジトリ(デモ: Fetch Request live) ではRequestオブジェクトを関連するコンストラクタを使って作成しています。その後fetch()を呼んでいます。画像をfetchingしている時から適切なMIMEタイプを受け取るために responseのBody.blob を実行し、 適切に処理されます。そしてObjectURLを作成し <img> 要素に追加して表示させています。

var myImage = document.querySelector('img');

var myRequest = new Request('flowers.jpg');

fetch(myRequest).then(function(response) {
  return response.blob();
}).then(function(response) {
  var objectURL = URL.createObjectURL(response);
  myImage.src = objectURL;
});

 Fetch with init then Request example リポジトリ(デモ: Fetch Request init live) では上記の内容に加えて、fetch()を呼び出すとき、初期化オブジェクトinitを渡しています。

var myImage = document.querySelector('img');

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg');

fetch(myRequest,myInit).then(function(response) {
  ... 
});

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

var myRequest = new Request('flowers.jpg',myInit);

仕様

ブラウザ互換性

関連項目

• Fetch API
• ServiceWorker API
• HTTP access control (CORS)
• HTTP