Response

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();

ここで 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);

• サービスワーカー API
• HTTP アクセス制御 (CORS)
• HTTP