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