DOM

：

インターフェイス

：

Response インターフェイス

　 編集：2022.04.08 by T.A.

→● MS

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

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

コンストラクター
new 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 を生成します。
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);
response . statusText→●
response の状態°メッセージを返す。
response . headers→●
response のヘッダーリストを Headers として返す。
response . clone()→●
response のクローンを返す。
テスト
HTML：

ここに表示
スクリプト組み込み：



スクリプト：


スクリプト：



表示内容：
表示内容：