MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

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

Fetch APIResponse インターフェースは、リクエストのレスポンスを表します。

Response.Response() コンストラクタを使い、新しい Response オブジェクトを作ることができます。しかしほかの API の返り値として使うことが望ましいです。例えば、ServiceWorker の Fetchevent.respondWithGlobalFetch.fetch() などです。

コンストラクタ

Response.Response()
新しいResponseオブジェクトを返します。

プロパティ

Response.type 読取専用
レスポンスのタイプを示す。(例:basic,cors)
Response.url 読取専用
レスポンスのURLを返す。
Response.useFinalURL
レスポンスの最後の URL かどうかを通知する boolean 値を含む。
Response.status 読取専用
HTTPステータスコードを返す。(例:200 成功)
Response.ok 読取専用
レスポンスが成功(200-299 の範囲のステータス)したか否かを通知する boolean 値を含む。
Response.statusText 読取専用
ステータスコードに対応したステータスメッセージを含む(たとえば、200 で OK)。
Response.headers 読取専用
レスポンスに関連した Headers オブジェクトを含む。

Response は Body を実装しているため、次のプロパティも使用可能である:

Body.bodyUsed 読取専用
レスポンスで body が既に使用されているかどうかを示す Boolean 値を保持する。

メソッド

Response.clone()
Response オブジェクトのクローンを生成する。
Response.error()
ネットワークエラーに関連した新しい Response オブジェクトを返す。
Response.redirect()
異なる URL で新しい response を生成する

Response は Body を実装しているため、次のメソッドも使用可能である:

Body.arrayBuffer()
Response ストリームを取得し、それを完全に読み込む。これは、ArrayBuffer で解決する promise を返す。
Body.blob()
Response ストリームを取得し、それを完全に読み込む。これは、 Blob で解決する promise を返す。
Body.formData()
Response ストリームを取得し、それを完全に読み込む。これは、 FormData オブジェクトで解決する promise を返す。
Body.json()
Response ストリームを取得し、それを完全に読み込む。これは、 JSON オブジェクトで解決する promise を返す。
Body.text()
Response ストリームを取得し、それを完全に読み込む。これは、USVString (text)で解決する promise を返す。

basic fetch example (run example live) では image を取得するために単純な fetch() を使用し、それを <img> タグの中に入れて表示しています。

fetch() はpromiseを返し、then の引数として Response オブジェクトを渡します。

fetch() 呼び出しは、fetch 操作のリソース関連した Response オブジェクトを解決する promise を返します。

image をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、Body.blobResponse は body を実装しています)を実行する必要があることに注目してください。

var myImage = document.querySelector('.my-image');
fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(response) {
  var objectURL = URL.createObjectURL(response);
  myImage.src = objectURL;
});

カスタム Response オブジェクトを生成するために、Response.Response() コンストラクタを使用することもできます:

var myResponse = new Response();

仕様

仕様 状態 コメント
Fetch
Response の定義
現行の標準 Initial definition

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 42
41[1]
39 (39)
34[1]
未サポート

29
28[1]

未サポート
機能 Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート

[1] この機能は設定で有効にします。

関連項目

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

 このページの貢献者: chikoski, YuichiNukiyama, lv7777
 最終更新者: chikoski,