Response: json() 静的メソッド

json() は Response インターフェイスの静的メソッドで、指定された JSON データを本体とし、Content-Type ヘッダーを application/json に設定したレスポンスを返します。レスポンスステータス、ステータスメッセージ、追加のヘッダーも設定することができます。

このメソッドを使うと、JSON エンコードされたデータを返すための Response オブジェクトを簡単に作成できます。例えば、サービスワーカーはブラウザーが行うフェッチリクエストへ介入し、json() を使用して、メインスレッドに返すために Response をキャッシュされた JSON データから構築するかもしれません。 json() メソッドは、単一ページアプリケーションや JSON レスポンスが期待される他のアプリケーションで JSON データを返すためにサーバーコードで使用することもできます。

構文

Response.json(data)
Response.json(data, options)

引数

data

レスポンス本体として使用する JSON データ。

options 省略可

レスポンスの設定（ステータスコード、ステータステキスト、ヘッダーなど）の入ったオプションオブジェクト。これは、Response() コンストラクターのオプション引数と同じです。

status: レスポンスのステータスコード、例えば 200 です。
statusText: ステータスコードに関連付けられたステータスメッセージ。ステータスが 200 の場合、これは OK になるでしょう。
headers: レスポンスに追加したいヘッダーを、Headers オブジェクト、または文字列のキーと値の組からなるオブジェクトリテラル（リファレンスは HTTP ヘッダーを参照ください）に入れたものです。

返値

Response オブジェクトです。

例外

TypeError: data が JSON 文字列に変換できない場合に発生します。これは、渡されたデータがメソッドを持つ JavaScript オブジェクトであったり、参照するオブジェクトが循環参照であったり、渡されたオブジェクトが undefined である場合に発生するかもしれません。

例

JSON データによる Response

このライブサンプルでは、JSONレスポンスオブジェクトを作成する方法を示し、検査のために新しく作成されたオブジェクトをログ出力します（ログ出力コードは関係ないので示していません）。

<pre id="log"></pre>

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

async function logResponse(response) {
  const responseText = await jsonResponse.text();
  log(`body: ${responseText}`);
  jsonResponse.headers.forEach((header) => log(`header: ${header}`));
  log(`status: ${jsonResponse.status}`);
  log(`statusText: ${jsonResponse.statusText}`);
  log(`type: ${jsonResponse.type}`);
  log(`url: ${jsonResponse.url}`);
  log(`ok: ${jsonResponse.ok}`);
  log(`redirected: ${jsonResponse.redirected}`);
  log(`bodyUsed: ${jsonResponse.bodyUsed}`);
}

下記のコードは Response オブジェクトを作成し、JSON 本体を { my: "data" } で、ヘッダーは application/json に設定します。

const jsonResponse = Response.json({ my: "data" });
logResponse(jsonResponse);

このオブジェクトには以下のプロパティがあります。本体とヘッダーは期待通りに設定されており、既定のステータスは 200 に設定されていることに注意してください。

JSON データとオプションのついた Response

この例では、status と statusText オプションを指定して JSON レスポンスオブジェクトを作成する方法を示します。

<pre id="log"></pre>

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

async function logResponse(response) {
  const responseText = await jsonResponse.text();
  log(`body: ${responseText}`);
  jsonResponse.headers.forEach((header) => log(`header: ${header}`));
  log(`status: ${jsonResponse.status}`);
  log(`statusText: ${jsonResponse.statusText}`);
  log(`type: ${jsonResponse.type}`);
  log(`url: ${jsonResponse.url}`);
  log(`ok: ${jsonResponse.ok}`);
  log(`redirected: ${jsonResponse.redirected}`);
  log(`bodyUsed: ${jsonResponse.bodyUsed}`);
}

下記のコードは Response オブジェクトを作成し、JSON 本体に { some: "data", more: "information" } を、ヘッダーには application/json を設定します。また、ステータスを 307 に設定し、適切なステータステキスト ("Temporary Redirect") を設定します。

const jsonResponse = Response.json(
  { some: "data", more: "information" },
  { status: 307, statusText: "Temporary Redirect" },
);
logResponse(jsonResponse);

オブジェクトは以下のプロパティを保有しており、これらは期待どおりに設定されています。ステータスの値が 200 から 299 の範囲にないため、レスポンスの ok プロパティが false に変更されたことに注意してください。

仕様書

Specification
Fetch Standard # ref-for-dom-response-json①

ブラウザーの互換性

BCD tables only load in the browser