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

WorkerOrGlobalScopeWindowWorkerGlobalScope の両方で実装されています。これはつまり 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: 使用したいリクエストのキャッシュのモードを指定できます: defaultno-storereloadno-cacheforce-cacheonly-if-cached などのモードが使用できます。
  • redirect: リダイレクトをどう処理するかについて次の値を取ることができます: follow (自動でリダイレクトに従う)、error (リダイレクトが起こった場合エラーを伴って中止する)、manual (手動でリダイレクトを処理する)。Chrome のデフォルト値は follow です(バージョン 47 より前はデフォルト値は manual でした)。
  • referrer: USVString の no-referrerclient、URL。デフォルトは client です。
  • referrerPolicy: リファラー HTTP ヘッダーを指定します。次のオプションが使用可能です。no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-url
  • integrity: リソースに subresource integrity 値を含ませることが出来ます (例:sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。
  • keepalive: keepalive オプションはページより長生きするリクエストを許可するのに使われます。keepalive フラグありのFetchはNavigator.sendBeacon() APIの置き換えです。
  • signal: AbortSignal オブジェクトのインスタンスです。つまり AbortController 経由で fetch リクエストと通信したり望む場合には中止したりできます。

返り値

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

例外

タイプ 説明
AbortError リクエストは中止されました (AbortController.abort() を使用)。
TypeError Firefox 43 から、http://user:password@example.com のように URL に credentials を含む場合、fetch() は TypeError を投げます。

Fetch Request example リポジトリー (デモ: Fetch Request live) では Request オブジェクトを関連するコンストラクターを使って作成しています。その後 fetch() を呼んで取得しています。画像を fetch している時から適切な 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() の定義
現行の標準 最新の仕様では WindowOrWorkerGlobalScope の中で部分的に定義されています。
Fetch
fetch() の定義
現行の標準 初期定義
Credential Management Level 1 草案 FederatedCredential または PasswordCredential のインスタンスを init.credentials の値として追加します。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 42Edge 完全対応 14Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.
完全対応 52
補足
補足 fetch() now defined on WindowOrWorkerGlobalScope mixin.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 完全対応 10WebView Android 完全対応 42Chrome Android 完全対応 42Edge Mobile 完全対応 14Firefox Android 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.
完全対応 52
補足
補足 fetch() now defined on WindowOrWorkerGlobalScope mixin.
Opera Android ? Safari iOS 完全対応 10Samsung Internet Android ?
Streaming response body
実験的
Chrome 完全対応 43Edge 完全対応 14Firefox 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the dom.streams.enabled preference and the javascript.options.streams preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29Safari 完全対応 10WebView Android 完全対応 43Chrome Android 完全対応 43Edge Mobile 完全対応 14Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 10Samsung Internet Android ?
Support for blob: and data:
実験的
Chrome 完全対応 48Edge 未対応 なしFirefox ? IE 未対応 なしOpera ? Safari ? WebView Android 完全対応 43Chrome Android 完全対応 43Edge Mobile 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
referrerPolicyChrome 完全対応 52Edge 未対応 なしFirefox 完全対応 52IE 未対応 なしOpera 完全対応 39Safari 完全対応 11.1WebView Android 完全対応 52Chrome Android 完全対応 52Edge Mobile 未対応 なしFirefox Android 完全対応 52Opera Android 完全対応 39Safari iOS 未対応 なしSamsung Internet Android ?
signal
実験的
Chrome ? Edge ? Firefox 完全対応 57IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 57Opera Android ? Safari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連項目

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

最終更新者: Uemmra3,