Response: json() 静态方法

Response 接口的 json() 静态方法返回一个 Response，它包含提供的 JSON 数据作为主体，以及一个 Content-Type header，该 header 设置为 application/json。还可以设置响应状态、状态消息和其他 header。

此方法使创建用于返回 JSON 编码数据的 Response 对象变得容易。例如，服务工作者会拦截浏览器发出的 fetch 请求，并可能使用 json() 从缓存的 JSON 数据中构建一个 Response 并返回给主线程。json() 方法还可以在服务器代码中用于为单页应用程序返回 JSON 数据，以及在任何其他需要 JSON 响应的应用程序中。

语法

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

参数

data

要用作响应主体的 JSON 数据。

options 可选

一个包含响应设置的对象，包括状态代码、状态文本和 header。这与 Response() 构造函数的 options 参数相同。

status: 响应的状态代码，例如 200。
statusText: 与状态代码关联的状态消息。对于状态 200，这可能是 OK。
headers: 您要添加到响应中的任何 header，包含在一个 Headers 对象或 String 键/值对的文字对象中（有关参考，请参阅 HTTP header）。

返回值

一个 Response 对象。

异常

TypeError: 如果 data 无法转换为 JSON 字符串，则会抛出此异常。如果数据是一个包含方法的 JavaScript 对象，或者包含循环引用，或者传递的对象为 undefined，则可能会发生这种情况。

示例

带有 JSON 数据的响应

此实时示例展示了如何创建 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" }，header 设置为 application/json。

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

该对象具有以下属性。请注意，主体和 header 按预期设置，默认状态设置为 200。

带有 JSON 数据和选项的响应

此示例展示了如何使用 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" }，header 设置为 application/json。它还将状态设置为 307 并设置了适当的状态文本（“临时重定向”）。

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

该对象具有以下属性，这些属性已按预期设置。请注意，响应的 ok 属性已更改为 false，因为状态值不在 200 到 299 的范围内。

规范

规范
Fetch 标准 # ref-for-dom-response-json①

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅

Service Worker API