Response

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

* Some parts of this feature may have varying levels of support.

Responseフェッチ API のインターフェイスで、リクエストのレスポンスを表します。

Response オブジェクトは Response() コンストラクターを用いて生成することができますが、他の API 操作の結果として返される Response オブジェクトに出会う可能性が高いでしょう。例えば、サービスワーカーの FetchEvent.respondWith や、単純な fetch() などです。

コンストラクター

Response()

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

インスタンスプロパティ

Response.body 読取専用

本文のコンテンツの ReadableStream です。

Response.bodyUsed 読取専用

本文がレスポンスで使用されたかどうかを定義する論理値が格納されます。

Response.headers 読取専用

レスポンスに関連した Headers オブジェクトが入ります。

Response.ok 読取専用

レスポンスが成功(200299 の範囲のステータス)したか否かを通知する論理値が入ります。

Response.redirected 読取専用

レスポンスがリダイレクトの結果である (つまり、その URL リストには複数のエントリーがある) かどうかを示します。

Response.status 読取専用

このレスポンスのステータスコードを返します (成功ならば 200 になります)。

Response.statusText 読取専用

ステータスコードに対応したステータスメッセージが入ります (たとえば 200 ならば OK)。

Response.type 読取専用

レスポンスの種類です。 (例えば basic, cors)

Response.url 読取専用

レスポンスの URL を返します。

静的メソッド

Response.error()

ネットワークエラーに関連付けられた新しい Response オブジェクトを返します。

Response.redirect()

別の URL で新しいレスポンスを返します。

Response.json()

指定された JSON エンコードデータを返すための新しい Response オブジェクトを返します。

インスタンスメソッド

Response.arrayBuffer()

レスポンスの本体を表す ArrayBuffer で解決するプロミスを返します。

Response.blob()

レスポンスの本体を表す Blob で解決するプロミスを返します。

Response.bytes()

レスポンス本体の Uint8Array 表現を解決するプロミスを返します。

Response.clone()

Response オブジェクトの複製を生成します。

Response.formData()

レスポンスの本体を表す FormData で解決するプロミスを返します。

Response.json()

レスポンスの本体のテキストを JSON として解釈した結果で解決するプロミスを返します。

Response.text()

レスポンスの本体のテキスト表現で解決するプロミスを返します。

画像の取得

basic fetch example (例をライブで実行) では画像を取得するために単純な fetch() を使用し、それを <img> タグの中に入れて表示しています。fetch() を呼び出すとプロミスを返します。これは、このリソース取得操作に関連付けられた Response オブジェクトで解決します。

画像をリクエストされているので、レスポンスに正しい MIME タイプを与えるために Response.blob を実行する必要があることにお気づきでしょう。

js
const image = document.querySelector(".my-image");
fetch("flowers.jpg")
  .then((response) => response.blob())
  .then((blob) => {
    const objectURL = URL.createObjectURL(blob);
    image.src = objectURL;
  });

Response() コンストラクターを使用して、独自の Response オブジェクトを生成することもできます。

js
const response = new Response();

PHP の呼び出し

ここで JSON 文字列を生成する PHP のプログラムファイルを呼び出し、結果として JSON の値を表示します。

js
// PHP を使用した JSON を呼び出す関数
const getJSON = async () => {
  // Response オブジェクトを生成
  const response = await fetch("getJSON.php");
  if (response.ok) {
    // レスポンスの本体から JSON の値を取得
    return response.json();
  }
  throw new Error("*** PHP ファイルが見つかりません");
};

// 関数を呼び出され、値やエラーメッセージをコンソールに出力する
getJSON()
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

仕様書

Specification
Fetch
# response-class

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
Response
Response() constructor
body parameter accepts ReadableByteStream
body parameter is optional
arrayBuffer
blob
body
body is a readable byte stream
bodyUsed
bytes
clone
error() static method
formData
headers
json
json_static
ok
redirect() static method
redirected
status
statusText
text
type
url

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Has more compatibility info.

関連情報