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 の値として追加します。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応4214

39

341

522

なし

29

283

10
Streaming response body4314 なし なし2910
Support for blob: and data:48 なし ? なし ? ?
referrerPolicy52 あり ? なし39 ?
signal ? ?57 なし ? なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応424214

39

341

522

?10 ?
Streaming response body434314 なし なし10 ?
Support for blob: and data:4343 なし ? ? ? ?
referrerPolicy5252 ? ?39 ? ?
signal ? ? ?57 ? なし ?

1. From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.

2. fetch() now defined on WindowOrWorkerGlobalScope mixin.

3. From version 28: this feature is behind the Experimental Web Platform Features preference.

関連項目

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

最終更新者: Uemmra3,