Response
Response
は Fetch API のインターフェイスで、リクエストのレスポンスを表します。
Response
オブジェクトは Response.Response()
コンストラクターを用いて生成することができますが、他の API 操作の結果として返される Response
オブジェクトに出会う可能性が高いでしょう。例えば、サービスワーカーの Fetchevent.respondWith
や、単純な WindowOrWorkerGlobalScope.fetch()
などです。
コンストラクター
Response()
- 新しい
Response
オブジェクトを返します。
プロパティ
Response.body
読取専用- 本文のコンテンツの
ReadableStream
です。 Response.bodyUsed
読取専用- 本文がレスポンスで使用されたかどうかを定義する論理値が格納されます。
Response.headers
読取専用- レスポンスに関連した
Headers
オブジェクトが入ります。 Response.ok
(en-US) 読取専用- レスポンスが成功 (
200
–299
の範囲のステータス) したか否かを通知する論理値が入ります。 Response.redirected
(en-US) 読取専用- レスポンスがリダイレクトの結果である (つまり、その URL リストには複数のエントリーがある) かどうかを示します。
Response.status
(en-US) 読取専用- このレスポンスのステータスコードを返します (成功ならば
200
になります)。 Response.statusText
(en-US) 読取専用- ステータスコードに対応したステータスメッセージが入ります (たとえば
200
ならばOK
)。 Response.trailers
Promise
であり、Headers
オブジェクトを返します。これはResponse.headers
にある HTTP の Trailer (en-US) ヘッダーの値です。Response.type
(en-US) 読取専用- レスポンスの種類です。 (例えば
basic
,cors
) Response.url
(en-US) 読取専用- レスポンスのURLを返します。
メソッド
Response.arrayBuffer()
- レスポンスの本文を表す
ArrayBuffer
で解決するプロミスを返します。 Response.blob()
- レスポンスの本文を表す
Blob
で解決するプロミスを返します。 Response.clone()
(en-US)Response
オブジェクトの複製を生成します。Response.error()
- ネットワークエラーに関連した新しい
Response
オブジェクトを返します。 Response.formData()
- レスポンスの本文を表す
FormData
で解決するプロミスを返します。 Response.json()
- レスポンスの本文のテキストを
JSON
として解釈した結果で解決するプロミスを返します。 Response.redirect()
- 異なる URL で新しい response を生成します。
Response.text()
- レスポンスの本文のテキスト表現で解決するプロミスを返します。
例
画像のフェッチ
basic fetch example (run example live) では image を取得するために単純な 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()
コンストラクターを使用して、独自の Response
オブジェクトを生成することもできます。
const response = new Response();
Ajax 呼び出し
ここで JSON 文字列を生成する PHP のプログラムファイルを呼び出し、結果として JSON の値を表示します。簡単なエラーハンドリングも含んでいます。
// Function to do an Ajax call
const doAjax = async () => {
const response = await fetch('Ajax.php'); // Generate the Response object
if (response.ok) {
const jsonValue = await response.json(); // Get JSON value from the response body
return Promise.resolve(jsonValue);
} else {
return Promise.reject('*** PHP file not found');
}
}
// Call the function and output value or error message to console
doAjax().then(console.log).catch(console.log);
仕様書
Specification |
---|
Fetch Standard # response-class |
ブラウザーの互換性
BCD tables only load in the browser