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.type 読取専用

レスポンスの種類です。 (例えば basic, cors)

Response.url 読取専用

レスポンスの URL を返します。

Response.error()

ネットワークエラーに関連付けられた新しい Response オブジェクトを返します。

Response.redirect()

別の URL で新しいレスポンスを返します。

Response.json()

指定された JSON エンコードデータを返すための新しい Response オブジェクトを返します。

Response.arrayBuffer()

レスポンスの本体を表す ArrayBuffer で解決するプロミスを返します。

Response.blob()

レスポンスの本体を表す Blob で解決するプロミスを返します。

Response.bytes()

レスポンス本体の Uint8Array 表現を解決するプロミスを返します。

Response.clone()

Response オブジェクトの複製を生成します。

Response.formData()

レスポンスの本体を表す FormData で解決するプロミスを返します。

Response.json()

レスポンスの本体のテキストを JSON として解釈した結果で解決するプロミスを返します。

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 の値を表示します。

// PHP を使用した JSON を呼び出す関数
const getJSON = async () => {
  // Response オブジェクトを生成
  const response = await fetch("getJSON.php");
  if (response.ok) {
    // レスポンスの本体から JSON の値を取得
    return response.json();
  }
  throw new Error("*** PHP ファイルが見つかりません");
};

// 関数を呼び出され、値やエラーメッセージをコンソールに出力する
getJSON()
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

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