Response
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.trailers
-
Promise
であり、Headers
オブジェクトを返します。これはResponse.headers
にある HTTP のTrailer
(en-US) ヘッダーの値です。 Response.type
読取専用-
レスポンスの種類です。 (例えば
basic
,cors
) Response.url
読取専用-
レスポンスの URL を返します。
メソッド
Response.arrayBuffer()
-
レスポンスの本体を表す
ArrayBuffer
で解決するプロミスを返します。 Response.blob()
-
レスポンスの本体を表す
Blob
で解決するプロミスを返します。 Response.clone()
-
Response
オブジェクトの複製を生成します。 Response.error()
-
ネットワークエラーに関連した新しい
Response
オブジェクトを返します。 Response.formData()
-
レスポンスの本体を表す
FormData
で解決するプロミスを返します。 Response.json()
-
レスポンスの本体のテキストを
JSON
として解釈した結果で解決するプロミスを返します。 Response.redirect()
-
異なる URL で新しいレスポンスを生成します。
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();
Ajax 呼び出し
ここで JSON 文字列を生成する PHP のプログラムファイルを呼び出し、結果として JSON の値を表示します。簡単なエラー処理も含んでいます。
// Ajax 呼び出しを行う関数
const doAjax = async () => {
const response = await fetch('Ajax.php'); // Response オブジェクトを生成する
if (response.ok) {
const jsonValue = await response.json(); // レスポンスの本体から JSON の値を取得
return Promise.resolve(jsonValue);
} else {
return Promise.reject('*** PHP file not found');
}
}
// 関数を呼び出され、値やエラーメッセージをコンソールに出力する
doAjax().then(console.log).catch(console.log);
仕様書
Specification |
---|
Fetch Standard # response-class |
ブラウザーの互換性
BCD tables only load in the browser