この翻訳は不完全です。英語から この記事を翻訳 してください。

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

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

コンストラクタ

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

プロパティ

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

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

Body.body 読取専用
A simple getter used to expose a ReadableStream of the body contents.
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() はプロミスを返し、then の引数として Response オブジェクトを渡します。image をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、Body.blobResponse は body を実装しています)を実行する必要があることに注意してください。

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

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

var myResponse = new Response();

仕様

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

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

42

412

あり39 なし2910.1
Response() constructor

42

412

15

39

343

なし

29

284

10.1
headers

42

412

あり

39

343

なし

29

284

なし
ok

42

412

あり

39

343

なし

29

284

なし
redirected601649 なし47 なし
status

42

412

あり

39

343

なし

29

284

なし
statusText

42

412

あり

39

343

なし

29

284

なし
type

42

412

あり

39

343

なし

29

284

なし
url

42

412

あり

39

343

なし

29

284

なし
useFinalURL

42

412

あり

39

343

なし

29

284

なし
clone

42

412

あり

39

343

なし

29

284

なし
error あり ? あり なし あり なし
redirect あり ? あり なし あり なし
trailer ? ? ? ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

42

411

42

412

あり あり2910.14.0
Response() constructor

42

411

42

412

あり あり

29

284

10.34.0
headers なし なし あり なし なし なし なし
ok なし なし あり なし なし なし なし
redirected6060 あり4947 なし なし
status なし なし あり なし なし なし なし
statusText なし なし あり なし なし なし なし
type なし なし あり なし なし なし なし
url なし なし あり なし なし なし なし
useFinalURL なし なし あり

39

343

なし なし なし
clone なし なし あり なし なし なし なし
error なし なし ? なし なし なし なし
redirect なし なし ? なし なし なし なし
trailer ? ? ? ? ? ? ?

1. From version 41: this feature is behind the Experimental Web Platform Features preference.

2. From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

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

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

関連項目

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

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