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.
Response
はフェッチ API のインターフェイスで、リクエストのレスポンスを表します。
Response
オブジェクトは Response()
コンストラクターを用いて生成することができますが、他の API 操作の結果として返される Response
オブジェクトに出会う可能性が高いでしょう。例えば、サービスワーカーの FetchEvent.respondWith
や、単純な fetch()
などです。
コンストラクター
Response()
-
新しい
Response
オブジェクトを返します。
インスタンスプロパティ
Response.body
読取専用-
本文のコンテンツの
ReadableStream
です。 Response.bodyUsed
読取専用-
本文がレスポンスで使用されたかどうかを定義する論理値が格納されます。
Response.headers
読取専用-
レスポンスに関連した
Headers
オブジェクトが入ります。 Response.ok
読取専用-
レスポンスが成功(
200
–299
の範囲のステータス)したか否かを通知する論理値が入ります。 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
を実行する必要があることにお気づきでしょう。
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
オブジェクトを生成することもできます。
const response = new Response();
PHP の呼び出し
ここで JSON 文字列を生成する PHP のプログラムファイルを呼び出し、結果として JSON の値を表示します。
// 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 Standard # response-class |
ブラウザーの互換性
BCD tables only load in the browser