MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

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

GlobalFetch は WindowWorkerGlobalScope の両方で実装されています。これはつまりfetch() メソッドはあなたがリソースを fetch したいと思うような大半の場所で使用可能ということです。

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

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

fetch() メソッドの引数は Request() コンストラクタと全く同じです。

構文

Promise<Response> fetch(input[, init]);

引数

input
fetch したいリソースを定義します。以下の2つが使用出来ます。
  • fetch したい URL を含む USVString いくつかのブラウザーでは、スキームとして blob:data: を受け入れます
  • Request オブジェクト。
init Optional
リクエストに適用したい設定を含むオプションの (必須ではない) オブジェクトです。以下のオプションが使用できます。
  • method: リクエストするメソッド、GETPOST など。
  • headers: リクエストに追加したいヘッダー、Headers オブジェクトか ByteString 値を持つオブジェクトリテラルで指定して下さい。
  • body: リクエストに追加したいボディ、BlobBufferSourceFormDataURLSearchParams もしくは USVString オブジェクトなどが使用できます。method が GET や HEAD の場合使用できないので注意して下さい。
  • mode: リクエストで使いたいモードです。例: corsno-cors, or same-origin。
  • credentials: request に使用したい秘密情報: omitsame-origininclude が使用可能です。現在のドメインの Cookie を自動で送るためにはこの設定を指定する必要があります。Chrome 50 から、このプロパティはFederatedCredential インスタンスや PasswordCredential インスタンスを受け付けるようになりました。
  • cache: 使用したいリクエストのキャッシュのモードを指定できます: default、no-store、reload、no-cache、force-cache、only-if-cached などのモードが使用できます。
  • redirect: リダイレクトは以下の値を取ることができます: follow (自動でリダイレクトに従う)、error (リダイレクトが起こった場合エラーを伴って中止する)、manual (手動でリダイレクトを処理する)。 Chromeでは、バージョン 47 より前はデフォルト値は follow でしたが、 Chrome 47 からは manual になりました。
  • referrer: USVString の no-referrerclient、URL。デフォルトは client です。
  • referrerPolicy: リファラー HTTP ヘッダーの指定します。次のオプションが使用可能です。no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-url
  • integrity: リソースに subresource integrity 値を含ませることが出来ます (例:sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。

返り値

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

例外

タイプ 説明
TypeError Firefox 43 から、http://user:password@example.com のように URL に credentials を含む場合、fetch() は TypeError を投げます。

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);

init 内に、オブジェクトリテラルをヘッダーとして使う事もできます。

var myInit = { method: 'GET',
               headers: {
                   'Content-Type': 'image/jpeg'
               },
               mode: 'cors',
               cache: 'default' };

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

仕様

仕様 状態 コメント
Fetch
fetch() の定義
現行の標準 初期定義
Credential Management Level 1 勧告改訂案 Adds FederatedCredential or PasswordCredential instance as a possible value for init.credentials.

ブラウザー互換性

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 42.0 (有) 39 (39)
34[1]
未サポート 29
28[1]
未サポート
Streaming response body 43.0 ? ? ? ? ?
Support for blob: and data: 48.0 ?        
referrerPolicy 52.0 ?     39  
機能 Android Android Webview Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート 42.0 未サポート 未サポート 未サポート 未サポート 未サポート 42.0
Streaming response body 未サポート 43.0 ? ? ? ? ? 43.0
Support for blob: and data: 未サポート 43.0 ?           43.0
referrerPolicy 未サポート 52.0 ?       39   52.0

[1] This API is implemented behind a preference.

関連項目

ドキュメントのタグと貢献者

 このページの貢献者: dskmori, Uemmra3, aliceinwire, lv7777, Piroro-hs, chikoski
 最終更新者: dskmori,